lazy-loading - 如何判断延迟加载是否有效？

Question

我使用了一个名为 blazy 的 js，当我向下滚动页面到它时，图像会加载。
图像显示在 pingdom 速度测试中，如果延迟加载适用于图像，它是否应该显示在速度测试树中？

Answer 1

根据我的经验，我已经看到使用正确的 Lazy Router Setup 将导致 Angular 提供一个缩小的 js 文件包，它与你的惰性路由器 @NgModule ts 自定义文件具有相同的名称。

无论如何，这就是延迟加载的全部内容.. 根据请求捆绑资源..

我添加了一个简单的 Lazy Loading ts 文件并将其命名为 lazy-loading-router，并查看 Chrome Dev Tools 中的 Network 选项卡。

STEP 1: Create a custom declarations NgModule file : lazy-loading-router.ts

import { NgModule } from '@angular/core';
import { Comp2Component } from './components/comp2/comp2/comp2.component';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        Comp2Component
    ],
    imports: [
        Comp2Component,
        RouterModule,
        ReactiveFormsModule,
    ]
  })
  export class lazyMod {}

STEP 2: Create lazyloader.ts Router

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

const com2Lazy: Routes = [
    { 
        path: 'comp2', 
        loadChildren: () => import('./lazy-loading-router').then(e => e.lazyMod) 
    },
];

@NgModule({
  imports: [
    RouterModule.forRoot(com2Lazy, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class lazyLoader {}

STEP 3 Add lazyLoader to your App.module.ts