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

Question

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

Answer 1

根据我的经验，我看到使用正确的“懒惰路由器设置”会导致Angular退回一个缩小的js文件包，该文件包与懒惰路由器@NgModule ts自定义文件的名称相同。

这就是延迟加载的全部内容。.根据请求捆绑资源。.

我添加了一个简单的“延迟加载ts”文件，并将其命名为“ lazy-loading-router”，然后在Chrome Dev Tools的“网络”标签中查看。.我可以看到一个名为lazy-loading-router.js的缩小的js文件。 / p>

  

步骤1：创建自定义声明NgModule文件：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 {}

  

第2步：创建lazyloader.ts路由器

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 {}

  

步骤3将lazyLoader添加到您的App.module.ts