webpack常用配置（待更新）

webpack常用配置

在 Webpack 配置中，config.optimization.runtimeChunk('single') 和 config.optimization.usedExports(true) 是两个关键的优化选项，分别用于优化代码分割和 Tree Shaking。以下是它们的具体作用和实现原理：

---

1. runtimeChunk('single')

作用

• 提取 Webpack 运行时代码 ：将 Webpack 的运行时逻辑（如模块加载、依赖解析等）从入口文件分离到单独的 runtime.js 文件中。
• 优化缓存策略：运行时代码通常体积小但频繁变化，单独提取后可以避免因入口文件内容变化而导致的缓存失效。

实现原理

• 默认行为 ：未配置时，运行时代码会嵌入到每个入口文件（如 main.js）中。

• 配置为 'single' ：所有入口共享一个 runtime.js，减少重复代码。

• 示例输出：

  dist/
    ├── runtime.123456.js   # Webpack 运行时逻辑
    ├── main.abc123.js      # 主入口文件
    └── vendor.def456.js    # 第三方依赖

适用场景

• 多入口应用：多个页面共享同一份运行时代码。
• 长期缓存优化：利用浏览器缓存，减少重复下载。

---

2. usedExports(true)

作用

• 启用 Tree Shaking：通过静态代码分析标记未被使用的导出（exports），供后续压缩工具（如 Terser）删除。
• 减少代码体积：移除未使用的模块代码，优化生产环境构建结果。

实现原理

• 标记阶段 ：Webpack 分析代码，识别未被引用的 export。

• 删除阶段 ：在压缩阶段（如 TerserPlugin）清除标记为未使用的代码。

• 代码示例：

  // math.js
  export function add(a, b) { return a + b; }  // 被使用
  export function subtract(a, b) { return a - b; } // 未使用
  ​
  // app.js
  import { add } from './math.js';
  console.log(add(1, 2));

  构建后 ：subtract 函数会被删除。

注意事项

• 依赖 ES 模块语法 ：仅对 import/export 生效，CommonJS 模块无法优化。
• 避免副作用 ：需在 package.json 中设置 "sideEffects": false，或明确列出有副作用的文件。

---

组合使用效果

// webpack.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'single', // 提取运行时
    usedExports: true,      // 启用 Tree Shaking
    minimize: true,         // 压缩代码（需配合 Terser）
    splitChunks: {
      chunks: 'all',        // 公共模块拆分
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors'
        }
      }
    }
  }
};

构建结果：

• runtime.js：独立文件，包含 Webpack 运行时逻辑。
• main.js：仅包含业务代码，移除未使用的导出。
• vendors.js：第三方依赖代码，单独分包。

---

关键配置对比

配置项	作用	适用场景	依赖条件
runtimeChunk('single')	分离运行时代码，优化缓存	多入口、需长期缓存的项目	Webpack 4+
usedExports(true)	标记未使用代码，支持 Tree Shaking	生产环境构建	ES 模块语法 + 压缩工具

---

常见问题

Q1: 为什么 usedExports 开启了但代码未删除？

• 未启用压缩 ：需确保 optimization.minimize: true。
• 存在副作用 ：模块包含副作用代码（如 polyfill），需配置 sideEffects 字段。

Q2: runtime.js 需要手动引入吗？

• 自动注入 ：Webpack 生成的 HTML 文件会自动插入 runtime.js，无需手动处理。

Q3: 如何验证 Tree Shaking 生效？

• 分析工具 ：使用 webpack-bundle-analyzer 查看打包内容。
• 代码检查 ：在产物中搜索未使用的函数名（如 subtract）。

---

总结

• runtimeChunk('single') ：优化代码分割和缓存，适合多入口项目。
• usedExports(true) ：启用 Tree Shaking，减少生产环境代码体积。
• 协同工作：二者结合可显著提升应用性能，但需确保模块语法和构建配置正确。