Angular懒加载实践疑问：高流量博客文章是否适合采用懒加载？

你当前对所有非落地页全量使用普通懒加载的方案，对高自然流量的博客页面并不合理，但你不需要走“放弃懒加载将博客代码打包进main.js”的极端，存在兼顾主包体积和博客页加载速度的优化方案。

• 用户直接访问博客路由时，请求链路是串行的：先下载main.js启动Angular运行时，再触发懒加载逻辑拉取博客模块的chunk包，首次访问无缓存的场景下等待时间会被明显拉长
• 如果博客模块内部还有子组件、静态资源的懒加载逻辑，会进一步加长请求链，放大加载慢的感知

1. 自定义高流量路由预加载策略 #

Angular原生支持自定义路由预加载规则，你可以仅对博客等高访问路由启用预加载，其余低访问率路由保持普通懒加载：

• 首先实现自定义预加载策略：

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class HighTrafficPreloadStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 仅对标记了preload: true的路由执行预加载
    return route.data?.['preload'] ? load() : of(null);
  }
}

• 在路由模块注册该策略，并给博客路由添加预加载标记：

// app-routing.module.ts 注册预加载策略
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: HighTrafficPreloadStrategy
  })],
  exports: [RouterModule]
})

// 路由配置示例
const routes: Routes = [
  // 原有落地页路由
  { path: '', component: HomeComponent },
  { path: 'landing', component: LandingComponent },
  // 博客路由添加预加载标记，不会打入主包，主包加载完成后会在后台自动预拉取博客chunk
  { 
    path: 'blog', 
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule),
    data: { preload: true }
  },
  // 其他低流量路由保持普通懒加载
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

该方案完全不会增大main.js的体积，同时用户进入站点后会在后台静默加载博客模块的chunk，用户点击或直接访问博客路由时基本不会出现懒加载的等待延迟。

2. 博客内容静态化处理 #

如果你的博客内容更新频率较低，还可以使用Angular Universal的静态站点生成（SSG）能力，将所有博客页面预渲染为纯HTML文件。用户访问博客页时可以直接看到渲染完成的内容，无需等待JS加载解析，不仅加载速度提升明显，对SEO也有额外增益。

你可以使用source-map-explorer工具分析博客模块chunk的体积构成，如果存在体积较大的第三方依赖（比如markdown解析库、代码高亮库等），可以替换为更轻量的实现，或者对第三方依赖做单独拆包，进一步缩小博客模块的加载体积。

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