Vue——打包优化

【打包分析】

//安装依赖
cnpm i -S -D webpack-bundle-analyzer analyzer

//vue.config.js添加
chainWebpack: (config) => {
	if (process.env.use_analyzer) {
		config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
	}
}

//package.js-script添加
"analyzer": "cross-env use_analyzer=true npm run build"

//运行
npm run analyzer

【包分割optimization.splitChunks】

webpack官方文档：https://webpack.docschina.org/configuration/optimization/

//vue.config.js添加
configureWebpack: (config) => {
	config.optimization = {
		splitChunks: {
			automaticNameDelimiter:"-",
			minSize: 30000,
			maxSize: 300000,
			chunks:"async"
		}
	}
}

【图片压缩】

//安装依赖
cnpm i -S -D image-webpack-loader

//vue.config.js添加
chainWebpack: config => {
const imagesrule = config.module.rule('images')
imagesrule
	.use('image-webpack-loader')
	.loader('image-webpack-loader')
	.options({
		bypassondebug: true
	})
	.end()
}