面试题：Webpack 构建复杂微前端架构时避免重复打包的深度优化策略

Question

假设你正在开发一个基于 Webpack 的复杂微前端架构项目，各个微前端应用之间可能存在部分共享的依赖库，同时还有一些业务层面的公共模块。在这种情况下，既要保证各微前端应用能独立运行，又要最大程度避免重复打包带来的性能问题。请详细阐述你会从哪些方面入手进行优化，包括但不限于 Webpack 的配置、模块加载策略、构建流程设计，以及如何处理不同微前端应用版本不一致的共享依赖等问题。

Answer 1

Webpack 配置

1. externals 配置：将共享的依赖库通过 externals 配置排除在打包范围之外，比如对于常用的库如 react、react - dom 等，在每个微前端应用的 Webpack 配置中设置 externals: { 'react': 'React', 'react - dom': 'ReactDOM' }。这样在运行时，这些库会从全局变量（如通过 CDN 引入到页面的全局变量）中获取，而不是重复打包到每个微前端应用中。
2. DllPlugin 和 DllReferencePlugin：
   • 对于共享依赖库，使用 DllPlugin 提前构建出一个包含这些库的 DLL 文件。例如，创建一个 webpack.dll.js 配置文件，在其中配置需要提取的共享依赖库。
   • 在每个微前端应用的 Webpack 配置中，使用 DllReferencePlugin 来引用这个 DLL 文件，这样可以避免在每个微前端应用构建时重复打包这些共享依赖。
3. 公共模块提取：利用 webpack - split - chunks - plugin 插件来提取业务层面的公共模块。在 Webpack 配置的 optimization.splitChunks 中进行配置，通过设置 chunks: 'all'，minSize，minChunks 等参数，可以将多个微前端应用中重复的业务模块提取出来，生成单独的 chunk 文件，在页面加载时只需要加载一次。

模块加载策略

1. 动态加载：对于一些不影响首屏渲染的共享模块或业务模块，采用动态加载的方式。在代码中使用 import() 语法，Webpack 会将这些模块进行单独打包，在需要的时候通过 AJAX 请求加载，避免一次性加载过多代码，提高应用的初始加载性能。
2. 按需加载：根据微前端应用的实际使用情况，按需加载模块。例如，对于某些特定功能模块，只有在用户触发相关操作时才进行加载，这样可以减少初始加载的体积。

构建流程设计

1. 独立构建：每个微前端应用都有独立的构建流程，在构建过程中，首先处理共享依赖和公共模块的提取与引用。可以通过脚本管理各个微前端应用的构建，确保每个应用构建的独立性和一致性。
2. CI/CD 集成：将构建流程集成到 CI/CD 系统中，每次代码更新时，自动触发构建任务。在构建过程中，严格按照配置进行共享依赖和公共模块的处理，保证构建结果的稳定性和可靠性。

处理不同微前端应用版本不一致的共享依赖

1. 版本锁定：在项目的根目录使用 package - lock.json 或 yarn.lock 文件锁定共享依赖库的版本，确保所有微前端应用使用相同版本的依赖。这样可以避免因版本不一致导致的兼容性问题。
2. 版本隔离：如果确实存在无法统一版本的情况，可以考虑使用一些工具如 webpack - alias 或 @module - federation 中的版本隔离功能。通过别名配置，每个微前端应用可以使用自己指定版本的共享依赖库，同时在运行时通过一定的机制（如 @module - federation 的共享配置）来协调不同版本依赖的加载和使用，尽量减少版本冲突带来的影响。