webpack打包体积优化实践 - 精神之树的博客

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的体积。