vue 多页面配置cli4.4（二 打包优化 ）

上一篇讲了 怎么配置多页面的开发，接下来就是关于打包的优化

模拟情景，两个多页面 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
							},
						}
					}
				}
		    }
	}
}

思路就是，把各自引用的模块，添加到各自的页面中，同时也提取公共的模块出来

这里只做了关于插件方面的优化测试，其他地方暂时还没有添加