面试题：Angular中代码分割的常见方法

路由懒加载
- 原理：Angular 的路由模块支持懒加载功能。当应用启动时，懒加载模块不会立即加载，而是在路由导航到相关路径时才进行加载。通过在路由配置中使用 loadChildren 语法来指定需要懒加载的模块。例如：{ path: 'lazy - loaded - module', loadChildren: () => import('./lazy - loaded - module/lazy - loaded - module.module').then(m => m.LazyLoadedModule) }。这里使用了动态导入语法，import() 函数返回一个 Promise，当路由匹配到该路径时，Promise 被 resolve，模块被加载。
- 适用场景：适用于将大型应用拆分成多个功能模块，每个模块可以独立加载。比如电商应用中，用户模块、商品模块等可以设置为懒加载，只有当用户访问相关页面时才加载，提高应用的初始加载速度，尤其是对于那些用户可能不会经常访问的功能模块。
Webpack 代码分割插件（如 SplitChunksPlugin）
- 原理：Webpack 的 SplitChunksPlugin 可以将公共代码从入口 chunk 中提取出来，生成单独的 chunk 文件。它会分析模块之间的依赖关系，找出重复的代码，并将这些重复代码提取到共享的 chunk 中。例如，多个组件都依赖于同一个第三方库（如 lodash），SplitChunksPlugin 会将 lodash 相关代码提取到一个单独的文件中，避免在每个组件对应的 chunk 中重复包含。配置如下：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

适用场景：适用于优化应用的整体加载体积，减少重复代码。在大型 Angular 项目中，不同的功能模块可能共享一些基础库或工具函数，通过 SplitChunksPlugin 可以将这些共享代码提取出来，在应用加载时只加载一次共享部分，后续加载其他模块时可以复用，提高加载效率。

星途面试题库