[Day08]Angular 2教程:08 Lazy Loading 别让载入速度拖垮

本文详细介绍Angular中的懒加载技术，包括其实现原理与具体步骤。通过懒加载，可以显著提高大型应用的加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文出自最三方Angular系列教程，转载请注明出处！

前言
Lazyloading是指从一个资料物件通过方法获得里面的一个属性物件时，这个对应物件实际并没有随其父资料物件创建时一起储存在执行空间中，而是在其读取方法第一次被呼叫时才从其他资料来源中加载到执行空间中，这样可以避免过早地汇入过大的资料物件但并没有使用的空间占用浪费。

Lazyloading在加载非常多不同内容时非常有感。当一个网站包含的东西越多，打开的速度也会越慢，当网页从上到下读取，当遇到了比较大的元件时，读取速度上绝不会像读取小元件一样顺畅，常常因为所含的组件太多，导致网站读取速度变慢，这网站真的是吃了闷亏。那是否有办法改善这种因为读取速度而造成网站打开太慢的问题呢？

实现
Angular2 中， lazy loading 已经被建在 Router 里了。接下来要花几个步骤：

指定 app.routing.ts 中要 lazy load 的路由 (routes)
创建 Component 路由文件
调整要被 lazy load 的 module 的内容

路径物件

为了区分 lazy loading，我们要创建一个路径物件包含 loadChildren 特性。在这物件里面要设定 module 的名称和路径。

 
       01//app.routes.ts
 
       02 
 
       03import {Routes, RouterModule} from "@angular/router";
 
       04import {ModuleWithProviders} from "@angular/core";
 
       05 
 
       06const appRoutes: Routes  = [
 
       07    // 假设有首页
 
       08    { path:  "", redirectTo: "home", pathMatch: "full" },
 
       09     
 
       10    // 要处理的 Product APP 页面
 
       11    { path:  "product", loadChildren: "app/product/product.module#ProductModule"  }
 
       12];
 
       13 
 
       14export const routing: ModuleWithProviders  = RouterModule.forRoot(appRoutes);

这样代表 URL 会从 /product 开始， angular 路由将会得到 module 文件 app/product/product.module 并预期有 ProductModule 这个 class。

路由 Module

 
       01//product/product.routing.ts
 
       02 
 
       03import {RouterModule} from "@angular/router";
 
       04import {ModuleWithProviders} from "@angular/core";
 
       05import {ProductComponent} from "./product.component";
 
       06// 小零件 ( 各种用到的东西 )
 
       07import {ProductsListComponent} from "./products-list.component";
 
       08import {ProductDetailsComponent} from "./product-details.component";
 
       09 
 
       10const routes = [
 
       11    {
 
       12        path: "", //设定根目录为这一层
 
       13        component: ProductComponent,
 
       14        // Product 包含的小组件们
 
       15        children: [
 
       16            {path: "", component: ProductsListComponent},
 
       17            {path: ":id", component: ProductDetailsComponent}
 
       18        ]
 
       19    }
 
       20];
 
       21 
 
       22export const routing: ModuleWithProviders = RouterModule.forChild(routes);

设定 Component

定义 ProductComponent

 
       01//product/product.component.ts
 
       02import {Component} from "@angular/core";
 
       03 
 
       04@Component({
 
       05    template: `
 
       06        <my-nav></my-nav>
 
       07        <h1>Products</h1>
 
       08        <router-outlet></router-outlet>
 
       09    `
 
       10})
 
       11export class ProductComponent {}

router-outlet 会呈现这个 module 内容

有 Lazy Load 的 Module

 
       01//product/product.module.ts
 
       02 
 
       03import {NgModule} from "@angular/core";
 
       04import {ProductsService} from "./products.service";
 
       05import {ProductsListComponent} from "./products-list.component";
 
       06import {ProductDetailsComponent} from "./product-details.component";
 
       07import {routing} from "./product.routing";
 
       08import {ProductComponent} from "./product.component";
 
       09 
 
       10@NgModule({
 
       11    declarations: [ProductComponent, ProductsListComponent, ProductDetailsComponent],
 
       12    imports: [routing],
 
       13    providers: [ProductsService],
 
       14})
 
       15export class ProductModule {}

这边会用到 product.routing 的 routing。

测试

假设你的网站有三个 Module: home project about 那加入 lazy loading 的前后差异大概会是这样

原因是因为加入 lazy loading 所以会先只加载 home 根 about，在这边我们假设他们两个非常轻量，那就会使得整个网页加载的顺畅度整体提升，而比较大的 project 则在之后加载，就不会拖垮速度了！

补充：模板加载组件

方式

假设有两个 Components fast & slow

 
       01//src/components/fast.ts
 
       02import { Component } from '@angular/core';
 
       03 
 
       04@Component({
 
       05  selector:  'fast',
 
       06  template: `
 
       07    <p>Fast Content</p>
 
       08  `
 
       09})
 
       10 
 
       11export class FastComponent { }
 
       12 //src/components/slow.ts
 
       13import { Component } from '@angular/core';
 
       14 
 
       15@Component({
 
       16  selector:  'slow',
 
       17  template: `
 
       18    <p>Slow Content</p>
 
       19  `
 
       20})
 
       21 
 
       22export class SlowComponent { }

在 Template 里面加载 Component 是最常用加载方式。非常简单，只需要存放相应的 selector ，模板发动机就会自己找到并编译。

 
       01//app.component.ts
 
       02import {Component} from '@angular/core'
 
       03 
 
       04import {FastComponent} from 'src/components/fast'
 
       05import {SlowComponent} from 'src/components/slow'
 
       06 
 
       07@Component({
 
       08  selector:  'template-load',
 
       09  template: `
 
       10      <h1>方式一：template 动态加载</h1>
 
       11      <fast></fast>
 
       12      <slow></slow>
 
       13  `,
 
       14  directives: [ FastComponent, SlowComponent ]
 
       15})
 
       16export class TemplateLoadComponent {
 
       17  constructor() {
 
       18 
 
       19  }
 
       20}