Webpack 5 引入的 Matter 物质是构建系统内部对模块依赖关系的一种新抽象，它主要服务于模块联邦（Module Federation）下的运行时共享。传统打包工具在处理跨项目依赖时，往往把共享库直接打进各自包体，造成冗余。Matter 将这部分可被多个入口消费的依赖标记为“物质态”，在远程容器加载时按需注入，而不是每次都重复打包。
一、Matter 物质的底层原理
在 Webpack 5 的编译图中，每个模块都会关联一个 Dependency 对象，而 Matter 是在此之上增加的一层“物质描述符”。当开启模块联邦的 shared 配置后，构建器会扫描被标记为共享的包，将其编译产物从主 chunk 中抽离，并记录一份物质清单。这份清单描述了该模块的文件哈希、暴露接口以及运行环境要求。
运行时容器初始化时，会通过动态 import 拉取远程的 matter 描述文件，比对本地已存在的物质版本。如果版本兼容且已被加载，就直接复用；否则才从远程获取。这种机制减少了网络开销，也避免了多实例 React 或 Vue 导致的状态异常。本质上，Matter 是 Webpack 对自己依赖图谱的精细化运营。
从源码角度看，Matter 相关逻辑位于 webpack/lib/container 目录下，通过 MatterCompiler 与 MatterRuntimeModule 协作。编译阶段生成描述，运行阶段消费描述。它并不改变现有 loader 规则，只是悄悄在产物中嵌入了元数据，对开发者相对透明。
二、如何在项目中配置并使用 Matter
要使用 Matter 带来的优势，核心是正确书写模块联邦的 shared 字段。下面给出一个基础的主应用配置示例，展示如何将 react 与 react-dom 作为物质共享出去。
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host_app',
remotes: {
remote_app: 'remote_app@https://ipipp.com/remoteEntry.js'
},
shared: {
react: { singleton: true, eager: false },
'react-dom': { singleton: true, eager: false }
}
})
]
};
上述配置中，singleton 为 true 表示全局只允许一个 react 实例，这正是 Matter 发挥作用的地方：构建器会把 react 标记为单例物质，远程应用加载时若发现宿主已提供，便不再重复初始化。eager 设为 false 可延迟加载，进一步优化首屏。
远程应用的配置也类似，只需在 shared 中声明同样的包，不需指定 remotes 反向依赖。Webpack 在编译远程端时，会生成对应的 matter 清单，供宿主在运行时调度。如果两端版本不一致，可在 shared 中写版本区间，Matter 会按语义化规则选择兼容实例。
三、实践中的常见问题与优化思路
很多团队在微前端落地时遇到过“远程组件用了独立 React 导致 hooks 报错”，这往往是 shared 没配好，Matter 没能复用宿主物质。排查时建议先打印 __webpack_init_sharing__ 后的容器状态，确认 react 物质是否已注册。若未注册，检查 shared 名称是否完全匹配，包括子路径。
另一个坑是过度共享。把体积大且不常变更的库全标成 singleton 物质，虽能去重，却会让宿主负担加重。应结合业务，只共享框架级依赖。下表列出典型共享策略：
| 依赖类型 | 是否建议共享 | 原因 |
|---|---|---|
| react / vue | 是 | 避免多实例导致状态隔离 |
| 业务组件库 | 视情况 | 若多团队共用可共享，否则增加耦合 |
| 工具类如 lodash | 否 | 可按需引入，重复成本低 |
在性能优化上，可借助 Matter 的预加载能力。通过在宿主空闲时调用 import('remote_app/react_matter') 之类语句，提前拉取远程物质，等用户切换页面时零延迟渲染。这种思路在控制台类系统里效果明显，比单纯做分包更精细。
四、与旧版本 Webpack 的对比思考
Webpack 4 时代要实现类似效果，只能靠 external 加 CDN，或者自研运行时加载器，既难维护又容易出错。Matter 把这套逻辑内置化，让共享依赖成为构建元数据的一部分。开发者不必再手写大量脚本去判断全局变量是否存在。
不过也要注意，Matter 目前紧密耦合模块联邦，单独使用意义不大。如果项目是单体应用，没必要强行开启。它的价值在多个独立部署的前端仓库之间才显著。理解这一点，才能避免为了用新特性而用新特性，导致构建变慢。
总体看，Matter 物质是 Webpack 5 在依赖治理上的重要一步。它用更低的侵入性解决了长期存在的重复打包难题，也为微前端架构提供了标准底座。掌握其配置与排错方法，能显著提升大型前端系统的交付效率。