一、使用输出分析工具
新增webpack-bundle-analyzer插件，可以查看项目一共打了多少包，每个包的体积，每个包里面的包情况。
可以清晰的看到项目中一共有多少个包，包的体积是多少，里面加载了哪些东西，大小是多少。
webpack-bundle-analyzer插件
二、使用HappyPack开启多进程Loader转换
在整个构建流程中，最耗时的就是Loader对文件的转换操作了，而运行在Node.js之上的Webpack是单线程模型的，
也就是只能一个一个文件进行处理，不能并行处理。HappyPack可以将任务分解给多个子进程，最后将结果发给主进程。
JS是单线程模型，只能通过这种多进程的方式提高性能。
happypack插件
三、分割代码以按需加载
原理
单页应用的一个问题在于使用一个页面承载复杂的功能，要加载的文件体积很大，不进行优化的话会导致首屏加载时间过长，
影响用户体验。做按需加载可以解决这个问题。具体方法如下：
- 将网站功能按照相关程度划分成几类
- 每一类合并成一个Chunk，按需加载对应的Chunk
- 例如，只把首屏相关的功能放入执行入口所在的Chunk，这样首次加载少量的代码，其他代码要用到的时候再去加载。最好提前预估用户接下来的操作，提前加载对应代码，让用户感知不到网络加载
四、提取公共代码成单独模块。方便缓存
提取公共代码成单独模块
网友评论