《玩转webpack》第五章 进阶篇: webpack 构建速度和体积优化策略

• 语言: 中文（简体）
• 格式: .pdf
• 来源: github.com/cpselvis

摘要

文档详细介绍了Webpack的构建速度和体积优化策略，包括使用BundleAnalyzerPlugin和speed-measure-webpack-plugin分析构建时间和体积，通过Tree-shaking和Scope Hoisting减少冗余代码，利用动态Polyfill优化体积，以及通过缓存和缩小构建目标提升效率。

AI总结

《玩转webpack》第五章主要围绕Webpack的构建速度和体积优化策略展开，以下是总结：

---

### **核心观点：优化目标**
1. **构建速度优化**：通过分析打包耗时，优化Webpack配置，减少构建时间。
2. **构建体积优化**：通过分析打包体积，去除冗余代码，减小最终包体积。

---

### **构建速度优化策略**
1. **使用工具分析打包耗时**：
- **speed-measure-webpack-plugin**：可以详细分析每个Loader和插件的耗时，帮助定位构建瓶颈。
- **代码示例**：

     const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
     const SMP = new SpeedMeasurePlugin();
     const webpackConfig = SMP.wrap({
       plugins: [
         new MyPlugin(),
         new MyOtherPlugin()
       ]
     });

2. **颗粒度分析**：避免仅看总耗时，需关注具体Loader和插件的执行时间，便于针对性优化。

---

### **构建体积优化策略**
1. **分析体积**：
- 使用**webpack-bundle-analyzer**分析打包后的体积分布。
- 代码示例：

     const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
     module.exports = {
       plugins: [
         new BundleAnalyzerPlugin()
       ]
     };

- 打包结果会在8888端口展示各文件的体积分布。

2. **体积优化方法**：
- **Scope Hoisting**：通过优化模块作用域提升打包效率。
- **Tree-shaking**：移除未使用的代码。
- **公共资源分离**：将公共代码独立打包。
- **图片压缩**：使用工具压缩图片资源。
- **动态Polyfill**：
- **方案**：按需加载Polyfill，减少包体积。
- **推荐工具**：`polyfill-service`，可以根据需求动态加载Polyfill。

---

### **动态Polyfill方案对比**
| 方案 | 优点 | 缺点 | 是否采用 |
|--------------------------|--------------------------|--------------------------|----------|
| babel-polyfill | React 6官方推荐 | 包体积大（200K+），难以分离 | 否 |
| babel-plugin-transform-runtime | 体积小，按需加载类/方法 | 无法处理原型上的方法 | 否 |
| 自行实现Map、Set Polyfill | 定制化高，体积小 | 开发维护成本高 | 否 |
| polyfill-service | 按需加载，社区维护 | 部分浏览器兼容问题 | 是 |

---

### **缓存优化**
- **目的**：提升二次构建速度。
- **实现方式**：
- 开启babel-loader缓存。
- 开启terser-webpack-plugin缓存。
- 使用`cache-loader`或`hard-source-webpack-plugin`。

---

### **缩小构建目标**
- **目的**：减少不必要的模块构建。
- **实现方式**：
- 在`babel-loader`中排除`node_modules`目录。
- 示例：

    module.exports = {
      rules: [
        {
          test: /\.js$/,
          loader: 'happypack/loader',
          exclude: 'node_modules'
        }
      ]
    };

---

### **总结**
1. **工具推荐**：
- `speed-measure-webpack-plugin`：分析构建耗时。
- `webpack-bundle-analyzer`：分析构建体积。
2. **关键优化点**：
- 使用动态Polyfill减少包体积。
- 启用缓存提升二次构建速度。
- 通过Tree-shaking和Scope Hoisting优化打包效率。
3. **实践建议**：
- 结合项目需求选择合适的优化方案。
- 定期分析打包结果，持续优化。

---

以上总结涵盖了文档的核心内容和关键信息，便于快速理解和应用。