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