webpack打包体积优化实践

@spiritree  September 5, 2017

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得到分析大小和分析图

webpacktotal0.png

分析图中JS文件的大小

webpacksize0.png

分析图

webpackanalyze.png

删去或替换代价大的模块

我们看到echart模块占了将近四分之一的体积,但是好像项目中并没有用到,于是定位并删除模块引用。

echart.png

还发现fontawesome图标库模块在打包过程中被webpack标记为big,先以fa fa关键词定位

icon0.png

在项目中查看这个图标的具体应用

menucollapse0.png

花费400KB+大小的图标库来使用一个图标有点得不偿失,寻找element自带图标替代方案

menucollapse1.png
menucollapse3.png

替代完成后,删除import引用

importfontawesome.png

Code Splitting

对于大型的web应用而言,把所有的代码放到一个文件的做法效率很差,特别是在加载了一些只有在特定环境下才会使用到的阻塞的代码的时候。Webpack有个功能会把你的代码分离成Chunk,后者可以按需加载。

Code Spliting的具体做法就是一个分离点,在分离点中依赖的模块会被打包到一起,可以异步加载。一个分离点会产生一个打包文件。

Code Spliting用到了webpack自带的CommonsChunkPlugin插件,在webpack的配置文件中这样添加。

webpack-codesplit.png

按需加载在代码中的运用

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

webpackgzip.png

webpack3兼容性问题(JS压缩)

webpack2升级到webpack3的兼容性问题,JS压缩插件需要升级并重新在配置中应用

npm install uglifyjs-webpack-plugin@beta --save-dev

webpackjscompress.png

重新打包

npm run analyzenpm run build

webpacktotal1.png

webpack1.png

webpackgzip1.png

打包大小由3MB+ => 1.7MB => 500KB(Nginx开启gzip)


添加新评论