面试题：Angular构建生产版本时如何优化代码体积

1. 启用摇树优化（Tree Shaking）

原理：摇树优化是一种通过分析代码的导入和导出，去除未使用代码的技术。在JavaScript中，模块系统允许明确指定哪些代码被导出并可以被其他模块导入使用。构建工具（如Angular CLI使用的Webpack）在构建过程中会遍历模块依赖关系，识别出那些没有被导入使用的代码，并将其从最终的构建产物中移除。这样就有效减少了代码体积，因为只保留了实际运行所需的代码。
实现：在Angular项目中，Angular CLI默认支持摇树优化。确保项目使用ES6模块语法（import和export）进行代码组织。当使用ng build --prod命令构建生产版本时，Angular CLI会自动开启摇树优化，Webpack会分析项目中的模块，移除未使用的代码。

2. 代码分割（Code Splitting）

原理：代码分割是将代码拆分成多个较小的块，使得在应用加载时，只需要加载当前需要的部分，而不是一次性加载整个应用的所有代码。这样可以显著减少初始加载的代码体积，加快应用的启动速度。后续在需要其他功能时，再按需加载相应的代码块。
实现：
- 路由懒加载：在Angular中，可以使用路由懒加载来实现代码分割。通过在路由配置中使用loadChildren属性，而不是直接导入组件。例如：

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

这样，FeatureModule及其相关的组件、服务等代码不会在应用启动时加载，而是在用户导航到/feature路径时才会被加载。 - 手动代码分割：对于非路由相关的代码，也可以使用动态导入（Dynamic Imports）进行手动代码分割。例如，在某个服务或组件中：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  async loadFeature() {
    const { FeatureFunction } = await import('./feature/feature-functions');
    return FeatureFunction();
  }
}

这里feature-functions模块的代码只有在调用loadFeature方法时才会被加载。

3. 优化图片和资源

原理：图片等资源文件往往占据较大的体积。通过优化图片格式（如使用WebP格式，它通常比JPEG和PNG有更好的压缩比）、压缩图片（降低图片的分辨率、减少颜色深度等）以及合理设置资源的加载策略（如懒加载图片），可以减少应用整体的代码体积，加快页面加载速度。
实现：
- 图片格式转换：可以使用工具如image-webpack-loader，在构建过程中将图片转换为WebP格式。在angular.json文件的architect.builder为@angular - webpack:browser时，在architect下添加如下配置：

{
  "builder": "@angular - webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.extra.js"
    },
    // 其他原有配置...
  }
}

然后在webpack.extra.js中配置image - webpack - loader：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'image - webpack - loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

- **图片懒加载**：在Angular模板中，可以使用`loading="lazy"`属性来实现图片的懒加载。例如：

<img src="your - image - url.jpg" alt="description" loading="lazy">

4. 移除未使用的CSS

原理：在项目开发过程中，可能会引入一些未使用的CSS样式，这些样式会增加代码体积。通过工具分析哪些CSS规则没有在HTML或组件模板中被引用，然后将其从最终的CSS文件中移除。
实现：可以使用PurgeCSS工具。首先安装@angular - purgecss：

npm install @angular - purgecss --save - dev

然后在angular.json文件中配置：

{
  "architect": {
    "build": {
      "builder": "@angular - purgecss:browser",
      "options": {
        // 原有的其他配置...
        "styles": [
          "src/styles.css"
        ]
      }
    }
  }
}

这样在构建生产版本时，PurgeCSS会分析项目中的模板文件，移除未使用的CSS规则，减小CSS文件的体积。

星途面试题库

面试题：Angular构建生产版本时如何优化代码体积

知识考点

面试题答案

1. 启用摇树优化（Tree Shaking）

2. 代码分割（Code Splitting）

3. 优化图片和资源

4. 移除未使用的CSS