Angular 16应用中Checkly与Lighthouse的Total Blocking Time差异及优化咨询

两者检测结果的显著差异核心源于以下几点：

• 运行环境差异：Checkly在云端真实浏览器环境执行测试，会受地理位置、服务器负载、真实网络波动（如丢包、延迟）影响，且云端容器CPU资源可能受限，会放大主线程阻塞情况；而Lighthouse默认在受控的本地/模拟环境运行，网络、CPU节流是标准化配置（比如默认Fast 3G、CPU减速4倍），环境更稳定一致。
• 测试场景差异：Checkly模拟真实用户完整访问流程，通常会包含监控工具、广告、分析脚本等第三方资源的加载执行，这类脚本往往会占用大量主线程资源；而本地Lighthouse测试时，部分第三方脚本可能不会触发（比如非生产环境下广告不加载），自然阻塞时间更低。
• 测试配置差异：两者对「首次加载」的定义、缓存处理逻辑可能不同，且Chrome版本、扩展程序状态（Checkly用纯净Chrome，本地可能有插件）也会影响最终结果。

1. 拆分初始代码包，降低主线程加载压力 #

• 用路由懒加载拆分模块：给非核心路由配置loadChildren实现按需加载，避免一次性加载所有代码：

  const routes: Routes = [
    { path: '', component: HomeComponent },
    { 
      path: 'dashboard', 
      loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) 
    }
  ];
  

• 执行ng build --stats-json生成bundle统计文件，配合webpack-bundle-analyzer分析冗余依赖，移除未使用代码。

2. 优化主线程执行效率 #

• 启用OnPush变更检测策略：给组件添加changeDetection: ChangeDetectionStrategy.OnPush，减少不必要的变更检测次数：

  @Component({
    selector: 'app-widget',
    templateUrl: './widget.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class WidgetComponent {}
  

• 把重型计算移到Web Worker：用ng generate worker data-processor创建Web Worker，处理数据解析、复杂计算等任务，避免阻塞主线程。
• 延迟加载非关键第三方脚本：用动态import()导入非核心库（如图表、编辑器），或给脚本标签加defer属性，让其在页面渲染完成后再执行。

3. 优化Angular构建配置 #

• 确保启用生产模式：在main.ts中调用enableProdMode()，禁用开发环境的调试工具与额外检查：

  if (environment.production) {
    enableProdMode();
  }
  

• 确认AOT编译已开启（Angular 16默认启用）：在angular.json中architect.build.options.aot设为true，提前编译组件模板，减少运行时编译开销。
• 开启构建优化：在angular.json中启用optimization、minify、tree-shaking，压缩JS/CSS并移除未使用代码。

4. 优化资源加载策略 #

• 图片懒加载：给图片标签加loading="lazy"，或用Angular结合IntersectionObserver实现精细懒加载。
• 替换重型资源：用WebP/AVIF格式替代JPG/PNG，压缩图片体积；用轻量库替代重型依赖（如用date-fns代替moment.js）。
• 配置HTTP缓存：给静态资源设置Cache-Control头，配合Angular生产构建默认的内容哈希命名，让浏览器缓存不变资源，减少重复请求。

5. 清理冗余代码与第三方脚本 #

• 用ng lint检测未使用的组件、指令、服务，及时删除冗余代码。
• 评估第三方脚本必要性：移除不必要的监控、分析脚本，或配置为延迟加载，避免在初始加载阶段阻塞主线程。

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