微前端 webpack

应用实践

使用webpack-Bundle-analyse分析，主要问题是js重复构建 有一个子系统：53mb啊

实践2：

将要非esm规范的代码逐步转写，修改webpack打包配置，使其支持treeshaking

1.webpack-bundle-analyzer产物分析

2.mode配置：

• development
  • 快速构建启动
  • HMR
• production
  • tree-shaking
  • 代码压缩、css压缩 3.optimization.usedExports;

求索之后它会分析出哪些模块被使用了，然后配合tree-shaking移除

4.转写成 ESM 规范；

5.设置 sideEddect，就是标记无副作用（谨慎使用）；

代码改造：

1.找出非ESM代码：通过eslint规则"import/no-commonjs"和全局检索require、module.export关键词；

2.利用Babel将CommonJS转为ESM