webpack性能优化

webpack性能优化

优化可以从两个方面考虑，一个是优化开发体验，一个是优化输出质量。

优化开发体验

缩小文件搜索范围。涉及到webpack如何处理导入文件，不再赘述，不会的可以自行搜索。由于loader对文件转换操作很耗时，应该尽量减少loader处理的文件，可以使用include命中需要处理的文件，缩小命中范围。

使用DllPlugin，提升构建速度

使用happyPack开启多线程

使用UglifyJs压缩代码(只支持es5)，uglifyes支持es6，两个插件不能同时开启。使用ParalellUgifyPlugin开启多个子进程压缩，既支持UglifyJs又支持uglifyes

使用自动刷新：监听到代码改变后，自动编译构建可运行代码并刷新页面

开启模块热替换:在不刷新网页的同时实现实时预览

优化输出质量减少首屏加载时间

区分环境

压缩代码

CDN加速

使用Tree shaking

提取公共代码

按需加载

提升流畅度，即代码性能:

使用PrePack优化代码运行时的效率

开启Scope Hoisting，让webpack打包出来的代码更小、运行更快