webpack3优化实践
在用Vue-cli生成的项目中已经自带webpack配置文件,我们只需要运行npm run build
就能打包文件,但是默认配置打包出来的文件通常过大,这就需要我们改动配置来优化。
图解打包文件
在package.json
中加入如下脚本
"scripts": {
"analyze": "npm_config_preview=true npm_config_report=true node build/build.js"
},
运行npm run analyze
得到分析大小和分析图
分析图中JS文件的大小
分析图
删去或替换代价大的模块
我们看到echart模块占了将近四分之一的体积,但是好像项目中并没有用到,于是定位并删除模块引用。
还发现fontawesome图标库模块在打包过程中被webpack标记为big,先以fa fa
关键词定位
在项目中查看这个图标的具体应用
花费400KB+大小的图标库来使用一个图标有点得不偿失,寻找element自带图标替代方案
替代完成后,删除import引用
Code Splitting
对于大型的web应用而言,把所有的代码放到一个文件的做法效率很差,特别是在加载了一些只有在特定环境下才会使用到的阻塞的代码的时候。Webpack有个功能会把你的代码分离成Chunk,后者可以按需加载。
Code Spliting的具体做法就是一个分离点,在分离点中依赖的模块会被打包到一起,可以异步加载。一个分离点会产生一个打包文件。
Code Spliting用到了webpack自带的CommonsChunkPlugin
插件,在webpack的配置文件中这样添加。
按需加载在代码中的运用
exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../../vendor/exportToExcel');
const tHeader = ['序号', '进件渠道', '产品名称', '客户名称', '放款日期', '合同金额', '期次', '期限', '起息日', '还款日', '应还本金', '应还费用', '应还利息', '应还罚息', '待抵扣保证金', '应还合计', '是否逾期', '实际还款日期'];
const filterVal = ['index', 'finaCoopCompNo', 'name', 'customerName', 'loanDate', 'demandAmt', 'cycleNum', 'term', 'loanDate', 'dueDate', 'principal', 'fee', 'interest', 'penalizedAmt', 'despoitAmt', 'sumFee', 'isOverdue', 'factDueDate'];
let repayDetailList = this.repayDetailList;
const data = this.formatJson(filterVal, repayDetailList);
export_json_to_excel(tHeader, data, '还款明细');
})
},
这样xlsx(导出excel)模块就开启了按需加载,进一步降低了页面请求中需要JS的体积。
GZIP压缩
gzip对于JS和CSS等文件压缩比很大,能进一步压缩用户访问服务器需要的体积
先安装压缩插件npm install --save-dev compression-webpack-plugin
在配置中设置productionGzip: true
webpack3兼容性问题(JS压缩)
webpack2升级到webpack3的兼容性问题,JS压缩插件需要升级并重新在配置中应用
npm install uglifyjs-webpack-plugin@beta --save-dev
重新打包
npm run analyze
或npm run build
打包大小由3MB+ => 1.7MB => 500KB(Nginx开启gzip)
sddddddddddddd