三十分钟掌握Webpack性能优化
目录 一、优化构建速度 1.1 缩小文件的搜索范围 1.2 使用DllPlugin减少基础模块编译次数 1.3 使用HappyPack开启多进程Loader转换 1.4 使用ParallelUglifyPlugin开启多进程压缩JS文件 二、优化开发体验 2.1 使用自动刷新 2.2 开启模块热替换HMR 三、优化输出质量-压缩文件体积 3.1 区分环境--减小生产环境代码体积 3.2 压缩代码-JS、ES、CSS 3.3 使用Tree Shaking剔除JS死代码 四、优化输出质量--加速网络请求 4.1 使用CDN加速静态资源加载 4.2 多页面应用提取页面间公共代码,以利用缓存 4.3 分割代码以按需加载 五、优化输出质量--提升代码运行时的效率 5.1 使用Prepack提前求值 5.2 使用Scope Hoisting 六、使用输出分析工具 七、其他Tips webpack是现在主流的功能强大的模块化打包工具,在使用Webpack时,如果不注意性能优化,有非常大的可能会产生性能问题,性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等,因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深入浅出Webpack》这本书进行总结,涵盖了大部分的优化方法,可以作为Webpack性能优化时的参考和检查清单。基于Webpack3.4版本