Webpack 5 进阶：缓存 · Code Splitting · Tree Shaking · Module Federation

本篇承接「配置入门」，聚焦 webpack 5 在构建缓存、分包策略、Tree Shaking 与运行时联邦模块上的常见要点；细节以官方文档为准。

---

1. 持久化缓存（Filesystem Cache）

Webpack 5 起支持将模块打包的中间结果写入磁盘，二次构建只增量计算变更部分，显著缩短 CI 与本地重复构建时间。

// webpack.config.js（节选）
module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
};

• buildDependencies：把配置文件本身纳入依赖图，改配置会使缓存失效，避免用到陈旧缓存。
• 团队场景可与 cacheDirectory、CI 缓存目录策略配合；合并分支或升级 loader 后若结果异常，可先清空 .cache 再构建。

---

2. Code Splitting（代码分割）

目标：按路由或业务拆成多个 chunk，按需 import() 加载，减小首包体积。

• 入口拆分：多 entry 天然多 bundle（需注意重复依赖，常配合 splitChunks）。
• 动态导入：import('./module') 生成异步 chunk，由运行时加载。
• optimization.splitChunks：从 node_modules 抽出 vendor、或按策略合并过小 chunk，避免请求碎片化。

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
},

常见疑问：chunks: 'all' 表示同步 + 异步 chunk 都可参与拆分；具体缓存组命名与优先级需结合实际产物分析（可用 @statoscope/webpack-plugin 或官方 --analyze 思路）。

---

3. Tree Shaking（摇树）

移除 ES 模块中未被引用的导出，依赖：

1. ESM 语法（import/export）；CommonJS 摇树能力弱。
2. package.json 的 sideEffects：标明哪些文件有副作用（改全局、polyfill 等）；标记为 false 或精确列出路径，有利于跳过「看似未用实则需执行」的文件。
3. 压缩阶段：production 模式下调 Terser（或 SWC 等）会做 DCE（死代码消除）。

注意：lodash 全量引入难以摇树，常用 lodash-es 或 按需 babel-plugin。

---

4. Module Federation（模块联邦）

Webpack 5 提供的 运行时 跨应用共享模块能力：多个独立构建可在浏览器端按需拉取「远端容器」暴露的模块，常用于微前端、共享组件库。

• 核心概念：Host（消费方）、Remote（暴露方）、shared（共享依赖版本协商）。
• 官方指南：Module Federation | webpack

典型心智：联邦 ≠ 简单的 CDN 外链，而是 webpack 在运行时注入 remoteEntry，再通过异步边界加载远程模块；React/Vue 等单例库常在 shared 里配置 singleton: true。

与本站「微前端」笔记对照：qiankun 偏应用级集成；Module Federation 偏模块级共享，选型取决于团队边界与发布节奏。

---

5. 与本目录其他篇章的关系

篇章	内容
02 Loader / Plugin	转换与生命周期扩展
03 配置文件	optimization、splitChunks 基础写法
本文	缓存、分包语义、摇树条件、联邦定位
05 常见问题精要	要点压缩版