上一篇讲了 怎么配置多页面的开发,接下来就是关于打包的优化
模拟情景,两个多页面 A 、B
A 页面使用了 iview 组件库
B 页面使用了 ant-design-vue 组件库
假设未做任何配置,会把这两个组件库都打包到一起,等于说 访问A页面,也会加载到B页面的使用的插件,势必会增加首屏的速度
通过配置 config.js文件,我们可以将 引用的组件,
在打包时 引入各自的组件,这样可以降低首屏的访问速度,达到按需的目的
配置如下(有参考网上其他案例)
module.exports = {
lintOnSave: false,
productionSourceMap: false,
pages: {
kangWei: {
...
chunks: ['chunk-vendors', 'chunk-common','chunk-iview','kangWei']
},
wanBo: {
...
chunks: ['chunk-vendors', 'chunk-common', 'chunk-ant','wanBo']
},
},
configureWebpack: config =>{
if (process.env.NODE_ENV === 'production') {
config.optimization = {
splitChunks: {
cacheGroups: {
// 抽离所有入口的公用资源为一个chunk
common: {
name: "chunk-common",
chunks: "initial",//静态 动态 全部
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 1,//打包优先级
reuseExistingChunk: true,//组件缓存
enforce: true
},
// 抽离node_modules下的库为一个chunk
vendors: {
name: "chunk-vendors",
test: /[\\/]node_modules[\\/]/,
chunks: "initial",
priority: 2,
reuseExistingChunk: true,
enforce: true
},
iview: {
name: "chunk-iview",
test: /[\\/]node_modules[\\/]view-design[\\/]/,
chunks: "all",
priority: 3,
reuseExistingChunk: true,
enforce: true
},
ant: {
name: "chunk-ant",
test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
chunks: "all",
priority: 3,
reuseExistingChunk: true,
enforce: true
},
}
}
}
}
}
}
思路就是,把各自引用的模块,添加到各自的页面中,同时也提取公共的模块出来
这里只做了关于插件方面的优化测试,其他地方暂时还没有添加