Angular 17独立组件迁移后项目运行缓慢问题咨询

问题根源 #

迁移到独立组件后，Angular的打包工具会默认将每个独立组件、管道、指令拆分为单独的chunk——哪怕是首页依赖的模态框、辅助管道这类资源，都会被拆成独立文件。虽然总体积下降，但大量小chunk会增加HTTP请求数，TCP握手和请求排队的开销直接拖慢了应用启动速度。

解决方案 #

• 合并首页关联资源为统一Chunk
  在angular.json的build配置里添加chunkGroups，把首页相关的组件、管道、指令打包进同一个初始chunk：

  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "chunkGroups": {
        "home-shared": {
          "test": "**/*home/**|**/*modal/**|**/*home-pipes/**", // 匹配首页相关文件
          "type": "initial"
        }
      }
    }
  }
  

  这样所有首页依赖的资源会被合并成一个或几个大chunk，大幅减少请求数。

• 延迟加载非首屏必需的组件
  首页用到的模态框如果不是初始化就要渲染的，改成懒加载模式，只有用户触发操作时才加载对应的chunk：

  import { Component, inject } from '@angular/core';
  import { ModalService } from './services/modal.service';
  
  @Component({
    standalone: true,
    template: '<button (click)="openUserModal()">打开用户弹窗</button>'
  })
  export class HomeComponent {
    private modalService = inject(ModalService);
  
    async openUserModal() {
      // 按需加载模态框组件
      const { UserModalComponent } = await import('./modals/user-modal.component');
      this.modalService.open(UserModalComponent);
    }
  }
  

• 开启小Chunk自动合并
  调整打包优化配置，让Angular自动合并体积过小的chunk：

  "build": {
    "options": {
      "optimization": {
        "scripts": {
          "minify": true,
          "splitChunks": {
            "minSize": 10000, // 小于10KB的chunk会被合并
            "maxSize": 500000
          }
        }
      }
    }
  }
  

  根据项目实际情况调整minSize阈值，平衡单chunk体积和请求数。

• 配置预加载策略
  如果不想合并chunk，可通过预加载让浏览器在空闲时提前加载必要的资源，避免用户操作时的延迟：
  在路由配置里启用预加载：

  import { Routes, PreloadAllModules } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  
  export const routes: Routes = [
    {
      path: '',
      component: HomeComponent,
      children: [
        // 子路由配置
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

  也可以自定义预加载服务，只预加载首页相关的chunk，避免浪费带宽。

内容的提问来源于stack exchange，提问作者Behnam Aminazad