webpack性能优化策略

前言

前端技术的发展真的可以用百（gui）花（quan）齐（zhen）放（luan）来形容，无论是技术栈的演进，技术框架的推新，还是各种模式，反模式的最佳实践都在不断的涌现。如今前端工程化的概念早已深入人心，那种直接在js中写脚本，通过src嵌入到页面，然后按F5刷新页面查看结果的开发方式已经渐行渐远。基本上选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配，而在诸多构建工具中，webpack以其丰富的功能和灵活的配置在诸多构建工具中大方光彩，React、Vue、Angular2等诸多知名项目也都选用其作为官方构建工具，深受业内追捧，但随着工程开发但复杂度和代码规模不断地增加，webpack暴露出来的性能问题也愈发明显，极大的影响着开发过程中的体验。

问题归纳

经历了多个web项目的实战经验，对webpack在构建中逐步暴露出来的性能问题归纳主要有如下几个方面：

• 代码全量构建速度过慢，即使是很小的改动，也要等待长时间才能查看到更新与编译后的结果（引入HMR热更新后有明显改进）；
• 随着项目业务的复杂度增加，工程模块体积也会急剧增大，构建后的模块通常要以M为单位计算；
• 多个项目之间共用基础资源存在重复打包，基础库代码复用率不高；
• node的单进程实现在耗cpu计算型loader中表现不佳；

针对以上问题，我们来看看怎样利用webpack现有的一些机制和第三方扩展插件来逐个击破。

慢在何处

作为工程师，我们需要用数据和事实说话，“我觉得很慢”，“太卡了”，“太大了”，之类的表述难免显得太笼统和抽象，那么我们不妨从以下几个方面来着手进行分析：

• 从项目结果着手，代码组织是否合理，依赖使用是否合理；
• 从webpack自身提供的优化手段着手，看看哪些api未做优化配置；
• 从webpack自身不足着手࿰