Webpack5 新特性详解：持久化缓存、Tree Shaking 与 Module Federation

Webpack5 概览与核心改进

webpack作为最使用最广泛的前端打包工具，已经成为前端工程化基础设施的一部分。而Webpack上一个大版本更新已经是18年的时候了，两年时间过去了让我们看看Webpack5都带来了哪些新特性，对我们的应用又有哪些帮助。

概览

参考 Webpack 官方 Changelog 截图，主要改进集中在以下几个核心方面：

通过持久化缓存提高性能
采用更高效的持久化缓存算法及默认行为配置
通过优化 Tree Shaking 和代码生成机制，有效减小 Bundle 体积
提升对 Web 平台的原生兼容性
清理为兼容 Webpack4 而遗留的不合理状态（state）
引入重大更改以预留未来功能空间，确保 Webpack5 能长期稳定运行

官方声明虽简略，仅提及持久化缓存与 Tree Shaking，却未重点强调 Module Federation 这一重大特性。接下来，我们将详细梳理具体的升级内容。

过时功能移除与兼容性变更

过时功能移除

首先，移除了在 Webpack4 中已标记为 Warning（警告）的功能。

同时，IgnorePlugin 和 BannerPlugin 现在必须传入参数，该参数可以是 Object、String 或 Function 类型。

require.include 语法已被废弃，使用时会触发 Warning。此行为可通过 Rule.parser.requireInclude 配置项调整为 allowed、deprecated 或 disabled。

移除了 Node.js Polyfills 的自动注入。早期 Webpack 旨在让 Node.js 模块在浏览器中运行，但随着模块生态变化，许多模块仅用于浏览器。继续自动 Polyfill 如 crypto 等 Node 模块会增加打包体积，因此 Webpack5 移除了这一自动行为。

长期缓存与确定性构建

长期缓存

实现模块、模块ID和导出名称的确定性。

模块、ID及导出名称现已唯一确定，相关配置为 chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"。
其中，模块和模块ID使用 3 至 4 位的数字ID，导出名称使用 2 位的数字ID。
该设置默认开启，但允许通过上述配置进行修改。

真实内容哈希

在 Webpack5 中，将使用基于文件内容的真实哈希 [contenthash]，取代此前仅基于文件内部结构的哈希计算方式。
这对长期缓存具有积极影响。当代码仅修改注释或变量名时，Webpack 会复用之前的缓存，而非生成新的文件内容哈希。

开发体验优化与模块联邦

开发支持

首先是 Chunk IDs 语义化。

新的 Chunk ID 生成语法由 chunk 内容决定。因此，我们不再需要 import(/* webpackChunkName: "name" */ "module") 来进行调试（debugging）。

此举可能暴露 chunk 内的敏感内容（若存在），可通过修改配置 chunkIds: "named"来恢复原有行为。

其次是 Module Federation（模块联邦）。

这是一个值得重点关注的特性。模块联邦允许多个 Webpack 构建产物协同工作，在运行时将多个构建产物聚合，呈现为单一大型构建产物的效果。
例如，app_one 和 app_two 共享了 ["react", "react-dom","react-router-dom"]，，同时 app_two 将自身的 Dialog 暴露给 app_one 使用。
通过模块联邦可原生解决模块间的相互依赖问题，在微前端领域尤为适用。此外，部分基础依赖可改为外部依赖，本地开发时无需引入，从而避免 node_modules 层级过深的问题，在本地开发过程中实现大幅提效。


module.exports = {
 plugins: [
  new ModuleFederationPlugin({
   name: "app_two_remote",
   library: { type: "var", name: "app_two_remote" },
   filename: "remoteEntry.js",
   exposes: {
    “./Dialog”: "./src/Dialog"
   },
   remotes: {
    app_one: "app_one_remote",
   },
   shared: ["react", "react-dom","react-router-dom"]
  }),
  new HtmlWebpackPlugin({
   template: "./public/index.html",
   chunks: ["main"]
  })
 ]
};

Tree Shaking 增强与其他特性

更好的 Tree Shaking。

嵌套 tree-shaking：Webpack 现在会追踪 export 链路，对嵌套场景提供更优优化。如下例所示，b 不会出现在生产代码中。


// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from "./inner";
export { inner }

// user.js
import * as module from "./module";
console.log(module.inner.a);

内部模块：Webpack 4 不分析导入和导出模块间的依赖关系，而 Webpack5 通过 optimization.innerGraph 记录依赖关系。如下例中，仅 test 方法使用了 something，最终可实现标记更多未使用的导出项。


import { something } from "./something";

function usingSomething() {
return something;
}

export function test() {
return usingSomething();
}

Commonjs 支持：现在 Webpack 不仅支持 ES module 的 Tree Shaking，Commonjs 规范的模块也开始支持。

其他特性

新的 Web 平台支持：Webpack 5 开始原生支持 JSON Modules、Asset Modules、Native Worker 和异步模块等。
Webpack 生成的代码不再仅限于 ES5，也会生成 ES6 代码。
Node.js 的最小支持版本从 6 升级到了 10。

升级建议与总结

喜欢尝鲜的开发者可参照迁移指南升级 Webpack。出于谨慎考虑，建议优先从练手项目或后台类应用开始升级。迁移指南：https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md

小结

两年间，Webpack5 进行了大量升级，包括性能优化、更强的开发支持及更多原生特性。其影响不仅于此，Module Federation 对模块依赖关系的改变及对现有开发模式的冲击仍在进一步观察中。期待 Web 开发越来越好。

到此这篇关于 Webpack5 正式发布，有哪些新特性的文章就介绍到这了，更多相关 Webpack5 新特性内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

Webpack5 正式发布：核心新特性与升级指南