面试题：Angular微前端架构下如何使用Webpack进行代码分割

1. 代码分割实现方式

使用 splitChunks 插件：在Webpack配置文件（通常是 webpack.config.js）中，配置 optimization.splitChunks 选项。它可以将所有模块的公共依赖提取到单独的chunk中。

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

chunks：指定要分割的chunk类型，'all' 表示所有chunk，包括初始、异步和按需加载的chunk。
minSize：表示分割的chunk最小大小，单位为字节。
minChunks：表示至少被 minChunks 个chunk引用才会被分割。
cacheGroups：定义缓存组，用于将符合条件的模块提取到特定的chunk中。vendors 缓存组专门提取来自 node_modules 的模块，default 缓存组用于提取其他公共模块。

动态导入实现懒加载：在Angular中，使用动态导入语法（import()）来实现懒加载模块。例如，在路由配置中：

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy.module').then(m => m.LazyModule)
  }
];

Webpack会自动将 lazy.module 及其依赖打包成一个单独的chunk，只有在访问 '/lazy' 路由时才会加载。

2. 对懒加载模块的处理

按需加载：懒加载模块会在需要时（例如用户访问特定路由）才从服务器加载。这减少了初始加载时的代码量，提高了应用的初始加载速度。
预加载：可以使用Angular的 PreloadAllModules 策略或自定义预加载策略来提前加载懒加载模块。在 RouterModule.forRoot 中配置：

RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules
})

这样，在应用初始加载完成后，浏览器空闲时会自动预加载懒加载模块，当用户访问相关路由时，模块能更快显示。

3. chunk优化

命名优化：通过 splitChunks.name 选项设置chunk的命名规则。合理的命名有助于识别chunk的内容，方便调试和管理。例如设置 name: true，Webpack会根据模块路径生成有意义的chunk名称。
控制chunk大小：通过调整 splitChunks.minSize 等参数，确保chunk大小适中。过大的chunk加载时间长，过小的chunk会增加请求数量。一般将公共库等提取到一个较大的vendor chunk，业务模块按功能分割成合适大小的chunk。

4. 对应用加载速度和资源管理的影响

加载速度：

初始加载速度提升：代码分割将初始加载的代码量减少，只加载应用运行必需的代码，从而加快页面的首次渲染速度。
后续加载速度：懒加载模块按需加载，在用户需要时才加载，避免了一次性加载大量代码，提高了用户体验。预加载策略则进一步优化了后续页面的加载速度。

资源管理：

资源按需使用：通过代码分割和懒加载，只有实际使用到的资源才会被加载，减少了不必要的资源浪费。
缓存管理：合理的chunk分割使得浏览器可以更好地利用缓存。例如，将不变的第三方库提取到单独的vendor chunk，只要库版本不变，该chunk就可以一直被缓存，提高了缓存命中率。

星途面试题库

面试题：Angular微前端架构下如何使用Webpack进行代码分割

知识考点

面试题答案

1. 代码分割实现方式

2. 对懒加载模块的处理

3. chunk优化

4. 对应用加载速度和资源管理的影响