首页 > 其他分享 >vuecli build 代码拆解

vuecli build 代码拆解

时间:2022-10-08 16:59:26浏览次数:63  
标签:vuecli chunk 默认 拆解 build 模块 chunks true 加载

splitChunks: {
    // 表示选择哪些 chunks 进行分割,可选值有:async,initial和all
    chunks: "async",
    // 表示新分离出的chunk必须大于等于minSize,默认为30000,约30kb。
    minSize: 30000,
    // 表示一个模块至少应被minChunks个chunk所包含才能分割。默认为1。
    minChunks: 1,
    // 表示按需加载文件时,并行请求的最大数目。默认为5。
    maxAsyncRequests: 5,
    // 表示加载入口文件时,并行请求的最大数目。默认为3。
    maxInitialRequests: 3,
    // 表示拆分出的chunk的名称连接符。默认为~。如chunk~vendors.js
    automaticNameDelimiter: '~',
    // 设置chunk的文件名。默认为true。当为true时,splitChunks基于chunk和cacheGroups的key自动命名。
    name: true,
    // cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块,就分配到该组。模块可以被多个组引用,但最终会根据priority来决定打包到哪个组中。默认将所有来自 node_modules目录的模块打包至vendors组,将两个以上的chunk所共享的模块打包至default组。
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10 //优先级越大越优先
        },
        // 
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

 

chunks选项,决定要提取那些模块。
默认是async:只提取异步加载的模块出来打包到一个文件中。
异步加载的模块:通过import('xxx')或require(['xxx'],() =>{})加载的模块。
initial:提取同步加载和异步加载模块,如果xxx在项目中异步加载了,也同步加载了,那么xxx这个模块会被提取两次,分别打包到不同的文件中。
同步加载的模块:通过 import xxx或require('xxx')加载的模块。
all:不管异步加载还是同步加载的模块都提取出来,打包到一个文件中
minSize选项:规定被提取的模块在压缩前的大小最小值,单位为字节,默认为30000,只有超过了30000字节才会被提取。
maxSize选项:把提取出来的模块打包生成的文件大小不能超过maxSize值,如果超过了,要对其进行分割并打包生成新的文件。单位为字节,默认为0,表示不限制大小。
minChunks选项:表示要被提取的模块最小被引用次数,引用次数超过或等于minChunks值,才能被提取。
maxAsyncRequests选项:最大的按需(异步)加载次数,默认为 6。
maxInitialRequests选项:打包后的入口文件加载时,还能同时加载js文件的数量(包括入口文件),默认为4。
先说一下优先级 maxInitialRequests / maxAsyncRequests <maxSize<minSize。
automaticNameDelimiter选项:打包生成的js文件名的分割符,默认为~。
name选项:打包生成js文件的名称。
cacheGroups选项,核心重点,配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项,其余选项和外面一致,若cacheGroups每项中有,就按配置的,没有就使用外面配置的。
test选项:用来匹配要提取的模块的资源路径或名称。值是正则或函数。
priority选项:方案的优先级,值越大表示提取模块时优先采用此方案。默认值为0。
reuseExistingChunk选项:true/false。为true时,如果当前要提取的模块,在已经在打包生成的js文件中存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。
enforce选项:true/false。为true时,忽略minSize,minChunks,maxAsyncRequests和maxInitialRequests外面选项

 

理解 cache groups

cacheGroups 继承 splitChunks 里的所有属性的值,如 chunksminSizeminChunksmaxAsyncRequestsmaxInitialRequestsautomaticNameDelimitername ,我们还可以在 cacheGroups 中重新赋值,覆盖 splitChunks 的值。另外,还有一些属性只能在 cacheGroups 中使用:testpriorityreuseExistingChunk

  // 关闭性能提示   // performance: {   //   hints: false   // },   config.optimization.splitChunks({         // chunks: 'initial',  // 表示选择哪些 chunks 进行分割,可选值有:async,initial和all          // minSize: 20000, // 表示新分离出的chunk必须大于等于minSize,默认为30000,约30kb。         // maxSize: 60000,         cacheGroups: {           vendors: {             name: 'chunk-vendors',             test: /[\\/]node_modules[\\/]/,             chunks: 'initial',             minSize: 20000,             maxSize: 60000,             maxInitialRequests: 5,             reuseExistingChunk: true,             priority: 6,             automaticNameDelimiter: '~',             enforce: true           },           vant: {             name: 'vant',             test: /[\\/]node_modules[\\/]vant[\\/]/,             chunks: 'initial',             maxSize: 200000,             reuseExistingChunk: true,             priority: 3,             enforce: true           },           echarts: {             name: 'echarts',             test: /[\\/]node_modules[\\/]echarts[\\/]/,             chunks: 'initial',             maxSize: 200000,             reuseExistingChunk: true,             priority: 4,             enforce: true           },           common: {             name: 'common',             test: resolve('src/components'),             chunks: 'initial',             maxSize: 200000,             reuseExistingChunk: true,             priority: 3,             enforce: true           },           // default: {           //   chunks: 'all',           //   maxSize: 100000,           //   automaticNameDelimiter: '~',           //   priority: 1,           //   reuseExistingChunk: true           // }         }       })

标签:vuecli,chunk,默认,拆解,build,模块,chunks,true,加载
From: https://www.cnblogs.com/lorin/p/16769432.html

相关文章