一、使用输出分析工具

新增webpack-bundle-analyzer插件，可以查看项目一共打了多少包，每个包的体积，每个包里面的包情况。

可以清晰的看到项目中一共有多少个包，包的体积是多少，里面加载了哪些东西，大小是多少。

webpack-bundle-analyzer插件

二、使用HappyPack开启多进程Loader转换

在整个构建流程中，最耗时的就是Loader对文件的转换操作了，而运行在Node.js之上的Webpack是单线程模型的，

也就是只能一个一个文件进行处理，不能并行处理。HappyPack可以将任务分解给多个子进程，最后将结果发给主进程。

JS是单线程模型，只能通过这种多进程的方式提高性能。

happypack插件

三、分割代码以按需加载

原理

单页应用的一个问题在于使用一个页面承载复杂的功能，要加载的文件体积很大，不进行优化的话会导致首屏加载时间过长，

影响用户体验。做按需加载可以解决这个问题。具体方法如下：

1. 将网站功能按照相关程度划分成几类
2. 每一类合并成一个Chunk，按需加载对应的Chunk
3. 例如，只把首屏相关的功能放入执行入口所在的Chunk，这样首次加载少量的代码，其他代码要用到的时候再去加载。最好提前预估用户接下来的操作，提前加载对应代码，让用户感知不到网络加载

四、提取公共代码成单独模块。方便缓存

提取公共代码成单独模块