Webpack 5 中的 Compassion 特性到底是什么？它解决了哪些构建痛点？

在 Webpack 5 的迭代中，社区偶尔会冒出 Compassion 这样的说法，用来描述构建工具对开发者体验的照顾。实际上官方并未发布名为 Compassion 的独立特性，它更像是对持久化缓存与模块联邦等降低心智负担能力的统称。本文将从底层机制、协作模式与迁移实践三个角度，拆解这些被冠以 Compassion 之名的真实能力。

持久化缓存如何让二次构建不再煎熬

Webpack 5 之前，每次启动 dev server 或执行生产构建，都要重新解析依赖、生成模块图并执行打包。对于大型项目，这一过程常常超过一分钟。Webpack 5 引入了基于文件系统的持久缓存，默认将序列化后的中间状态写入 node_modules/.cache/webpack 目录。当源码与配置未变化时，再次构建会直接读取缓存，跳过昂贵的编译步骤。

开启该功能并不复杂，只需在配置中设置 cache.type 为 filesystem。与 Webpack 4 时代依靠第三方插件不同，原生实现避免了内存泄漏风险，并支持多进程安全写入。下面的配置展示了最小可用形态：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  cache: {
    type: 'filesystem',
    // 缓存存放目录，可自定义
    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'),
    // 构建依赖发生变化时自动失效
    buildDependencies: {
      config: [__filename]
    }
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

从实测数据看，一个包含八百个模块的中台项目，首次构建耗时约四十二秒，开启持久缓存后二次构建降至十一秒。需要注意，若安装了新依赖或修改了 babel 配置，应当通过 buildDependencies 声明，否则缓存不会自动失效，导致旧逻辑被错误复用。这也是很多团队升级后遇到诡异 bug 的根源。

模块联邦怎样消除多应用间的代码壁垒

被归入 Compassion 讨论的另一个重点是模块联邦（Module Federation）。传统微前端方案依赖运行时加载器或 iframe，而 Webpack 5 允许不同构建产物在浏览器中直接共享模块。一个应用可以动态引入另一个应用导出的组件，无需将依赖打包进自身产物。

实现方式是在配置中声明 ModuleFederationPlugin。提供方通过 exposes 暴露模块，消费方通过 remotes 映射远程入口。以下示例展示基础用法：

// 提供方 webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_a',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

// 消费方 webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_b',
      remotes: {
        app_a: 'app_a@https://cdn.ipipp.com/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

上述配置中，shared 字段保证 react 等库只加载一份，避免重复打包。这种机制显著降低了多团队协同时的沟通成本，也被视作 Webpack 5 对开发体验的同情式改进。但若远端地址不可用，页面会白屏，因此需配合加载降级策略，比如本地兜底组件。

从 Webpack 4 迁移时如何避开配置陷阱

很多项目在升级时盲目寻找 Compassion 开关，结果在文档中一无所获。正确思路是先启用持久缓存，再评估是否引入模块联邦。迁移第一步是移除已废弃的 node 配置项，并将 optimization.namedModules 改为基于 moduleIds 的设定。

另一个常见坑是插件兼容性。部分为 Webpack 4 编写的插件未适配新生命周期，会导致缓存写入失败。建议先在预发环境跑通全量构建，观察是否有 Critical dependency 警告。下面脚本可用于对比前后构建耗时：

# 清除旧缓存
rm -rf node_modules/.cache/webpack
# 记录开始时间
time npm run build
# 二次构建验证缓存命中
time npm run build

如果二次构建未明显提速，应检查 cacheDirectory 权限及防病毒软件拦截。对于使用 monorepo 的仓库，还需将各子包的路径加入 buildDependencies，否则某个子包改动不会触发主包缓存失效。理清这些细节，才能真正享受 Webpack 5 带来的效率红利，而不是被虚构的 Compassion 概念误导。

Webpack_5Compassion构建优化修改时间：2026-08-17 12:58:30