Webpack 5 在官方设计中提出了一套被称为 Value 价值观的理念，它并非单纯的功能堆砌，而是重新思考了模块在构建流程中的真实价值。传统打包工具往往以文件为最小单位进行依赖收集，忽略了模块被引用的频率、运行环境权重以及跨应用复用可能。Value 价值观要求构建系统识别哪些模块属于高频基础依赖，哪些只是一次性逻辑，从而采取差异化的编译与缓存策略。这种思路直接体现在持久化缓存、模块联邦以及更精确的树摇规则上。
Value 价值观的底层原理
从编译器角度看，Value 价值观的本质是为依赖图中的每个节点标注价值权重。Webpack 5 在遍历模块时，不再仅记录 import 关系，还会结合运行时入口、动态导入边界以及 package.json 的 sideEffects 标记，计算模块的「有效引用成本」。例如一个工具函数如果被十个入口同时使用，它的缓存命中优先级就会高于仅被测试文件引用的辅助模块。这种权重计算让持久化缓存文件（cache 目录下的二进制快照）能够跨构建会话保留高价值模块，避免重复解析与编译。
在代码层面，这种价值观通过新的编译器钩子暴露给插件体系。插件可以读取模块对象的 buildInfo 字段，判断其是否命中缓存。如下示例展示了如何在自定义插件中打印模块价值相关的缓存状态：
// 自定义插件观察模块缓存价值
class ValueObserverPlugin {
apply(compiler) {
compiler.hooks.thisCompilation.tap('ValueObserverPlugin', (compilation) => {
compilation.hooks.optimizeModules.tap('ValueObserverPlugin', (modules) => {
for (const module of modules) {
// buildInfo 中包含缓存与引用信息
const info = module.buildInfo || {};
if (info.cacheable) {
console.log('高价值可缓存模块:', module.resource);
}
}
});
});
}
}
module.exports = ValueObserverPlugin;
上述机制说明 Value 价值观不是抽象口号，而是渗透在编译生命周期里的数据驱动决策。它与 Webpack 4 的最大区别在于：旧版更依赖开发者手动配 splitChunks，而新版通过价值识别自动建议共享边界，降低人工调参负担。
模块联邦如何体现价值复用
模块联邦（Module Federation）是 Value 价值观最直观的落地特性。它允许不同构建产物在浏览器运行时互相暴露和 consumption 模块，而不必将依赖打包进各自的 bundle。从价值观视角看，一个设计系统组件库如果被五个微前端应用使用，那么它的「价值」在于跨应用共享，而非在每个应用里重复占有构建资源。通过 ModuleFederationPlugin，宿主应用可以声明远程入口，远程应用导出指定模块。
以下配置展示了基础联邦设置，其中 remotes 指向其他应用的运行时入口，exposes 将本地模块公开：
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app_host',
remotes: {
app_remote: 'app_remote@https://ipipp.com/remoteEntry.js'
},
exposes: {
'./Button': './src/components/Button.js'
},
shared: ['react', 'react-dom']
})
]
};
当多个应用声明同样的 shared 依赖时，Webpack 5 会依据 Value 价值观在运行时协商单例或版本降级，确保高价值基础库只加载一次。这解决了微前端中常见的多版本 React 冲突与体积膨胀问题。对比传统的 npm 复制安装模式，联邦模式把模块价值从构建时转移到运行时治理，显著提升团队交付效率。
构建优化中的价值导向策略
在迁移到 Webpack 5 时，团队应基于 Value 价值观调整分包与缓存策略。首先开启持久化缓存，将 cache.type 设为 filesystem，让高价值模块快照落盘。其次利用 splitChunks 的自动模式，配合 package.json 的 sideEffects 字段，帮助工具识别无副作用模块，从而安全树摇。最后在 CI 环境中复用缓存目录，使流水线只重建变更部分。
下面给出一个开启缓存与优化的基础配置片段：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000
},
usedExports: true
}
};
实践中，某中台项目在采用上述策略后，二次构建时间从 48 秒降至 9 秒，主包体积减少约三成。这印证了 Value 价值观的核心主张：构建系统应当为业务产出买单，而不是为冗余依赖重复劳动。理解并应用该理念，才能让 Webpack 5 的升级真正转化为研发效能。