vue项目,打包项目出现两种情况:
1、打包出来其中三个文件,一个文件是另外两个文件的并集;
2、打包出来的两个文件,几乎一模一样,少量字母有差别;
比如:
push([["chunk-de55909c","chunk-de55909c","chunk-2d0d350f","chunk-2d0d350f"
push([["chunk-de55909c","chunk-de55909c","chunk-2d0d350f","chunk-2d0d3bdf" 剩余内容完全一致。
modules是模块的文件夹,modules循环的使用是为了单独打包并命名各模块的代码。
let group = {
chunks: 'all',
minSize: 20000,
cacheGroups: {
vendor: {
name: 'chunk-vendor',
test: /[\\/]node_modules[\\/]/,
priority: 40,
chunks: 'initial'
},
lang: {
name: 'chunk-lang', // 本地国际化合并
priority: 20,
test: /[\\/]src(.*)[\\/]lang.js/
},
commons: {
name: 'chunk-commons',
test: resolve('src'), // can customize your rules
minChunks: 2, //minimum common number
priority: 30,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
modules.forEach((module) => {
let name = module.match(/(?<=modules\/)[\d\D]+(?=\/index.vue)/)
group.cacheGroups[name] = {
name: `chunk-${name}`,
priority: 20,
test: resolve(`/src/modules/${name}`)
}
})
config.optimization.splitChunks(group)
config.optimization.runtimeChunk('single')
config.optimization.minimize(true) // 代码压缩
1、打包出来其中三个文件,一个文件是另外两个文件的并集;
2、打包出来的两个文件,几乎一模一样,少量字母有差别;
暂时没想到思路,
最小打包的代码
使用splitChunks出现重复打包,估计是缺少组件了吧