如何处理Angular应用中的小Bundle以降低HTTP/1.x网络开销？

1. 合并小型路由相关Bundle #

针对你提到的路由类小Bundle，可以通过配置调整合并逻辑，同时保留模块化结构：

• 精确指定合并目标：在angular.json的项目构建配置中，添加bundleDependencies字段，将极小的路由模块或依赖指定合并到主Bundle或父级Bundle中。示例配置：

  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "bundleDependencies": [
              "src/app/routes/small-route-a.module.ts",
              "src/app/services/tiny-route-service.ts"
            ]
          }
        }
      }
    }
  }
  

• 先分析再合并：用webpack-bundle-analyzer可视化Bundle构成，避免盲目合并。先安装依赖：

  npm install webpack-bundle-analyzer --save-dev
  

  然后在angular.json中开启statsJson: true，执行ng build --prod --stats-json生成分析文件，最后运行npx webpack-bundle-analyzer dist/your-app/stats.json查看哪些小Bundle适合合并。

2. 用预加载策略替代合并 #

不用改变Bundle拆分结构，而是提前加载小Bundle，避免用户导航时的请求延迟：

• 全局预加载所有懒加载模块：在路由配置中启用PreloadAllModules，应用启动后空闲时自动加载所有懒加载Bundle：

  import { PreloadAllModules } from '@angular/router';
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 自定义预加载策略：针对高频访问的小路由模块做定向预加载，保留低频模块的懒加载特性：

  import { PreloadingStrategy, Route } from '@angular/router';
  import { Observable, of } from 'rxjs';
  
  export class TargetedPreloadStrategy implements PreloadingStrategy {
    preload(route: Route, load: () => Observable<any>): Observable<any> {
      // 只预加载标记了preload: true的路由
      return route.data?.['preload'] ? load() : of(null);
    }
  }
  

  给需要预加载的路由添加标记：{ path: 'small-route', loadChildren: () => import('./small-route.module').then(m => m.SmallRouteModule), data: { preload: true } }，并在AppRoutingModule的providers中注册该策略。

3. HTTP/1.x专属优化 #

HTTP/1.x不支持多路复用，请求开销显著，可搭配以下手段降低影响：

• 开启资源压缩：在angular.json中启用brotli或gzip压缩，同时配置服务器（如Nginx）开启静态资源压缩，进一步缩小小Bundle的传输体积：

  "optimization": {
    "scripts": true,
    "styles": true,
    "fonts": true,
    "brotli": true
  }
  

• 调整懒加载范围：对于极小且必用的路由模块，改为同步加载打包进主Bundle，避免额外请求。但需注意控制主Bundle体积，平衡首屏加载速度与后续请求开销。

4. 模块化与性能的平衡要点 #

• 仅合并极小且访问频率极高的模块，避免盲目合并导致主Bundle过大，拖慢首屏加载。
• 自定义预加载策略是当前场景下的最优解之一：既保留了路由模块的模块化拆分，又通过提前加载消除了小Bundle的请求延迟。

内容的提问来源于stack exchange，提问作者Anoush M