**前言!!!**
项目是20年启动的项目 持续更新至今 vue版本2+ ,vue-cli 4.4,如遇配置相关等报错 查阅官方文档!!
1、添加指令查看打包分析结果
paakage.json 文件
打包指令添加 --report
2、查看分析结果
执行指令后会在输出文件夹(默认dist)中多一个report.html 打开
打开后
面积大的就是打包体积越大 针对性的优化
执行build 打包出来25M左右
以下正题
看结果中 echarts pdfH5、 element-ui等相对较大
3、剥离三方库 cdn方式 加载
configureWebpack:{
externals:{
axios:'axios',
'vue-router': 'VueRouter',
'vue': 'Vue',
'Vuex': 'Vuex',
'element-ui': 'ELEMENT',
'echarts': 'ECHARTS',
'pdfh5': 'PDFH5',
},
}
在index.html中添加对应cnd !!!
后再次执行打包指令 包体积小了10M左右 (编号方便区分每次的结果 dist2)
4、 productionSourceMap: false, // 打包是否需要map文件
5、gzip 代码压缩
npm i compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// --配置
chainWebpack:config=>{
// 生产打包压缩
if (process.env.NODE_ENV === "production") {
config.plugin("compressionPlugin").use(
new CompressionWebpackPlugin({
test: /.(js|css|less|scss)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 0.8,
deleteOriginalAssets: true // 是否删除源文件
})
);
}
}
再次执行build 后
6、由于图片已经压缩过就不再展示 压缩地址 https://tinypng.com/
到此结束
由原来25M到 优化到3M左右 在可接受范围内 。