在前端打包内存泄漏之后做的事儿

[woodywuuu]

继上次解决了项目无法打包之后，项目可以成功打包了，但是需要用将近300s来打包，打出来的包竟然要13M左右。虽然我们的确模块和页面比较多，但是这也并不能打出这么大的包吧，于是乎我这个业余前端又开始折腾了。

roadhog里面已经自带了一个分析模块，只要在构建的时候加上--analyze参数，就会在打包完后生成一个分析的html，可以看到各个模块的打包占比。这里用的是webpack-visualizer-plugin插件，还有一个非常好用的插件叫webpack-bundle-analyzer，可以查看每个bundle里的各个依赖包的大小。安装后直接在webpack的config里面引入，扔进plugin就可以了，这里不详述。

具体占比就没图了，最大的是echarts，原因是现在好像没有对于react的适配，只能用一个echarts-for-reacts包作为SDK调用，所以会将整个echarts都打入。（之后应该考虑将echarts作为externals打入，之后继续研究的话可以尝试

除此之外还有lodash，antd等包体积也非常大。感觉是打包的时候打入了太多不必要的东西，查阅了一些资料，在某个老哥的博客下提到了CommonsChunkPlugin插件，可以从module中提取公共的chunk。翻了一下roadhog的代码，实际上已经内置了这个插件，但是只有在roadhog的配置里开启了多页应用的时候才会生效，具体代码在roadhog/lib/config/common.js中：

  if (config.multipage) {

    // Support hash

    var name = config.hash ? 'common.[hash]' : 'common';

    ret.push(new _webpack2.default.optimize.CommonsChunkPlugin({

      name: 'common',

      filename: name + '.js'

    }));

  }

尝试在roadhog中开启了这个多页参数，但是没有任何改进，在common.js里面只有2KB的错误提示，肯定是哪里有问题，尝试搜索发现了老哥二号的博客已经按照这个思路开工了，而且给出了比较完整的解决方案。其中最有参考价值的是在entry中加入常用包的入口。尝试将常用的antd包打入，效果惊人。主要是在webpack的配置里加上这么一行。

webpackConfig.entry.antd = ['antd/lib/button',

    'antd/lib/icon',

    'antd/lib/form',

    'antd/lib/menu',

    'antd/lib/input',

    'antd/lib/input-number',

    'antd/lib/table',

    'antd/lib/tabs',

    'antd/lib/modal',

    'antd/lib/row',

    'antd/lib/col'];

...

...

ret.push(new _webpack2.default.optimize.CommonsChunkPlugin({

    names: ['antd'],

    minChunks: Infinity

  }))

加上这段配置后，打包时间由270s直降到180s，打出的包从12.9M到9.2M，有质的飞跃。

之所以没有打入echarts，因为已经开启了按需加载，而画图组件只是在某些模块下使用，作为公共入口打入可能会增加别的模块不必要的加载时间。

在实际使用方面，测试发现首屏进入时会多一个antd.XXX.js，大小在175KB左右，首屏多了1s左右的加载时间，但是在进入其他页面的时候，平均少加载了50KB的JS。

由于暂时没有找到如何修改roadhog的代码，来完美替换webpack的配置，目前只能使用脚本在打包前强行替换配置文件。之后如有更好的操作方式会进行替换。

打包的优化还有许多考虑方向，我估计最容易实现的应该是在引入包的时候，只引入需要用到的包，比如在引入lodash的时候，我之前是：

    import _ from 'lodash'

应该使用：

    import range from 'lodash/range'

• webpack这一块的优化应该是最关键的，有许多的插件和属性需要去调整尝试，看了几遍文档也觉得是雾里看花，还需要多实践实践。

• 最后是具体代码的写法，比如.bind方法在构造器绑定的函数，要比箭头函数更为节约内存，减少循环调用，让v8引擎能够回收无用的对象等等。