tree shaking 不解决共享依赖重复引入，需 shared 配置、esm 规范与静态分析协同；子应用须禁用 commonjs 转译、严格对齐主应用 shared 设置、使用具名导入并验证产物剥离效果。
在微前端子应用打包中，Tree Shaking 本身不直接解决共享依赖重复引入问题——它面向的是“未使用代码的剔除”，而重复加载（如主应用和子应用各自打包一份 @angular/core）属于模块联邦（Module Federation）的依赖协调范畴。真正起作用的是 shared 配置 + ESM 规范 + 构建时静态分析协同。关键在于让 Tree Shaking 的前提条件成立，同时避免 shared 配置被破坏。
确保子应用使用 ESM 入口并禁用 CommonJS 转译
如果子应用构建过程把 ES 模块转成了 CommonJS（例如 Babel 设置 modules: 'commonjs'），Webpack 就无法静态分析 import 关系，不仅 Tree Shaking 失效，Module Federation 的 shared 机制也容易降级为各自加载。
- 在子应用的构建配置中强制保留 ESM：Webpack 中设
module.rules禁用 babel 对node_modules的处理；Vite 中确认build.rollupOptions.output.format === 'es' - 检查子应用
package.json是否有"type": "module"或正确导出"exports": { ".": { "import": "./dist/index.js" } } - 避免子应用里写
require('rxjs')或动态import('./feature.js')后再解构使用核心 API——这类写法绕过静态分析，可能导致 shared 失效或 Tree Shaking 漏判
子应用 shared 配置必须与主应用严格对齐
Tree Shaking 能生效的前提是：子应用真正“不打包”那些已声明为 shared 的依赖。若子应用的 shared 配置缺失、版本不一致或 singleton: false，它仍会把 rxjs 打进自己的 bundle，后续即使主应用加载了同一份，运行时也会存在两套实例，Tree Shaking 无法补救这种架构级冗余。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 子应用
ModuleFederationPlugin中的shared字段，必须包含与主应用完全相同的包名、requiredVersion和singleton: true - 推荐统一提取 shared 配置到公共脚本（如
webpack.shared.js），主子应用都require它，避免手动维护导致差异 - 特别注意：Angular CLI 项目需通过自定义 webpack config 注入 shared，不能只靠
ng build --prod默认行为
禁止子应用全量导入 shared 包中的未使用功能
即使 shared 配置正确，子应用若写 import * as Rx from 'rxjs' 或 import rxjs from 'rxjs'，Webpack 会认为整个 rxjs 被引用，从而阻止 Tree Shaking 剔除其中未使用的操作符（如 forkJoin），同时也可能干扰 shared 的实例复用逻辑（因命名空间导入可能触发额外初始化）。
- 子应用必须使用具名导入：
import { of, map } from 'rxjs'，且仅导入真实用到的操作符 - 避免在子应用中创建中间 wrapper 模块并全量 re-export shared 依赖，例如
export * from 'rxjs'—— 这等于主动关闭 Tree Shaking - 配合
sideEffects: false（子应用 package.json 中设置），防止因样式注入或 polyfill 导致 shared 包相关模块被整块保留
验证子应用是否真正剥离了 shared 依赖
不能只看配置，要实证。子应用独立构建后，检查其 dist 目录产物中是否还存在 node_modules/rxjs 或 @angular/core 的代码片段。
- 用
grep -r "Observable" dist/ | head -5快速搜索是否残留 rxjs 类型定义或实现 - 用
webpack-bundle-analyzer分析子应用产物，确认rxjs和@angular/*不出现在任何 chunk 中 - 浏览器运行时打开 DevTools → Sources，搜索
defineProperty或__webpack_require__调用，观察是否从主应用的 remoteEntry 加载 shared 模块，而非子应用自身 bundle
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
