Webpack 5 的 Wellbeing 福祉特性是什么？它如何提升构建体验

Webpack 5 的 Wellbeing 福祉并不是一个需要额外安装插件的孤立功能，它更像是一组默认行为与配置策略的集合，目标是把构建过程中的重复劳动降下来，让开发者把注意力放回业务逻辑本身。这个特性名称听起来偏向人文关怀，但落到工程层面，它对应的是持久缓存、资源模块、模块联邦以及更积极的树摇优化。单页应用越复杂，这些调整带来的体感越明显，尤其是二次构建和热更新阶段。

Wellbeing 福祉的设计目标与启用方式

Wellbeing 的设计思路来自一个非常现实的观察：构建工具的性能提升不能只盯着冷启动时间，开发者每天经历更多的是修改代码后的增量构建。传统的 Webpack 4 在每次构建时都会重新解析和打包大量未变化的模块，CPU 与内存消耗居高不下。Wellbeing 通过把缓存粒度从内存扩展到文件系统，让未改动的模块直接复用上一次结果，从而缩短等待。

启用方式并不复杂。在 Webpack 5 中，experiments 配置提供了 wellbeing 开关，默认值为 false，但推荐在开发环境和生产环境同时开启。它的底层会自动启用 filesystem 缓存、调整 chunk 拆分算法，并激活更严格的 sideEffects 判断。以下配置展示了最简开启方式：

module.exports = {
  mode: 'production',
  experiments: {
    wellbeing: true
  },
  cache: {
    type: 'filesystem'
  }
};

需要注意的是，wellbeing 不是银弹。它更适合模块数量超过 300 个的中大型项目，小项目开启后收益不明显，甚至可能因为缓存读写带来轻微开销。因此实际使用时应结合项目规模做基准测试。

持久缓存如何压缩二次构建时间

持久缓存是 Wellbeing 最核心的机制。Webpack 4 的缓存主要依赖内存，进程退出后缓存即失效，每次冷启动都要从头编译。Webpack 5 将缓存写入 node_modules/.cache 目录或自定义位置，第二次执行 webpack 时可以直接读取模块的编译结果，跳过解析、转换和依赖收集。

缓存策略并不是简单地把每个模块结果存下来。Webpack 5 会为每个模块生成内容哈希，只有当模块源码或加载器配置发生变化时，哈希才会改变。另外，配置文件本身也会被纳入 buildDependencies，避免改了 webpack.config.js 后仍然使用旧缓存导致的诡异问题。一个完整的缓存配置如下：

const path = require('path');

module.exports = {
  cache: {
    type: 'filesystem',
    version: 'wellbeing-v1',
    buildDependencies: {
      config: [__filename]
    },
    name: 'client-cache'
  },
  output: {
    path: path.resolve(__dirname, 'dist')
  }
};

使用 filesystem 缓存后，一个包含 800 个模块的项目，二次构建时间通常能从 30 秒降低到 8 秒左右，热更新响应也会更快。不过需要注意，缓存目录应加入 .gitignore，否则仓库体积会急剧膨胀。另一个常见误区是直接删除 node_modules/.cache 来清缓存，更推荐在配置里修改 version 字段强制失效。

资源模块与 Tree Shaking 带来的配置减负

Wellbeing 还推动了资源模块的默认化。以前处理图片、字体、SVG 需要配置 file-loader、url-loader、raw-loader，还要小心 limit 参数和输出路径。Webpack 5 内置的 asset 模块可以直接在 rules 中通过 type 声明 asset/resource、asset/inline、asset/source，省去大量第三方 loader 依赖。

除了配置层面，tree shaking 的提升也直接关系到产物健康度。Webpack 5 在 production 模式下会自动执行更细粒度的未使用导出删除，特别是对 ES module 的命名导入。配合 package.json 的 sideEffects 字段，甚至可以移除整个未使用的模块，而不是只删除内部未引用的导出。下方配置展示如何使用 asset/resource 处理静态资源：

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      }
    ]
  }
};

与旧版方案相比，资源模块不依赖额外的 npm 包，升级时不需要处理 loader 之间的版本冲突。在 CSS 文件中引用背景图、在 JS 中导入图标都能走统一规则。对于体积小于 8KB 的图片，可以改为 asset/inline，直接转为 base64 内联，减少 HTTP 请求。需要注意的是，内联过多会增大 JS 体积，需要根据实际资源大小设置 parser.dataUrlCondition.maxSize。

模块联邦与 Wellbeing 的组合实践

模块联邦虽然可以独立使用，但与 Wellbeing 组合时能解决微前端架构中的公共依赖重复加载问题。多个子应用共享 react、react-dom 等库时，如果不做处理，每个远端入口都会打包一份相同依赖，导致首屏加载变慢。

通过 ModuleFederationPlugin 的 shared 配置，Webpack 会在容器应用和远端模块之间协商依赖版本。如果版本兼容，只加载一份；如果不兼容，则回退到各自打包。这种协商机制减少了运行时请求次数，也减轻了构建压力。配置示例如下：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      remotes: {
        product: 'product@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

在开发微前端项目时，Wellbeing 的持久缓存仍然有效，因为 remoteEntry.js 的变化频率远低于业务模块。主应用和子应用分别构建，缓存目录相互独立，修改子应用不会使主应用的缓存全部失效。唯一需要注意的是 shared 依赖的版本约束，建议使用 semver 范围而不是写死具体版本，否则容易触发依赖重复打包。

Webpack 5Wellbeing 福祉构建性能修改时间：2026-10-02 13:10:01