webpack优化方案

解决问题首先需要找到问题出现在哪里，想要提升webpack构建速度需要先了解webpack打包做了什么，经历哪些流程，然后测量每个流程的时间消耗，从而发现问题，然后针对每个问题去进行优化。

webpack打包做了什么

参考：webpack打包原理 ? 看完这篇你就懂了 !

webpack作为一个模块打包工具，他的作用是将应用程序中用到的模块整合打包成一个或多个资源文件，webpack打包分为以下几个环节。

• 初始化参数：从配置文件和shell语句中获取配置参数整合然后实例化Compiler类；
• 开始编译：执行Compiler实例的run方法开始构建；
• 解析入口文件：从配置的entry文件开始，读取文件内容，通过@babel/parser编译返回AST；
• 找到所有依赖模块：通过@babel/traverse来找出AST的依赖的模块；
• AST转化成code：通过@bable/core和@babel/preset-env将AST转化成浏览器可执行的code；
• 递归所有依赖项生成依赖图：将树型结构线性化再转换成依赖图；
• 重写require，生成bundle文件：生成文件内容输入到bundle.js文件；

在webpack打包过程中存在一些问题，例如递归生成依赖图的过程中怎么解决循环依赖？

循环依赖

参考：webpack对循环依赖的处理

什么是循环依赖

参考：# JavaScript 模块的循环加载

循环依赖是指模块之间互相依赖加载，commonjs规范和esm规范有不同的表现和潜在问题， commonjs规范特性是加载时执行、缓存已执行模块，esm规范特性是加载时生成一个引用，使用时动态取值。

怎么检测循环依赖

webpack怎么处理循环依赖

类似commonjs的缓存机制

怎么去测量webpack打包的性能

• speed-measure-webpack-plugin
  • 分析整个打包总耗时
  • 分析每个loader和plugin的消费时间
• webpack-bundle-analyzer
  • 模块依赖可视化

优化方向

参考：玩转 webpack，使你的打包速度提升 90%

• 减少代码体积：压缩、去除冗余
• 减短构建时间：二次构建
• 减少请求次数：
• 利用缓存技术