Lazy loading, also known as code splitting, lets you divide your JavaScript code into multiple chunks. The result is that you do not have to load all the JavaScript of the full application when a user accesses the first page. Instead, only the chunks that are required for the given page are loaded.

懒加载能够容许咱们将TypeScript编译出的JavaScript代码拆分成若干个chunk, 这样，当应用程序加载时，咱们无需将整个利用所需的所有chunk都加载到浏览器中，而是能够实现按需加载的机制，即仅加载那些须要渲染的页面对应的chunk.

咱们在Angular我的项目里执行命令行ng build，即可查看打包进去的chunk名称和对应的大小，如下图所示。

默认状况下，咱们在Angular利用里编写的所有Component，会被ng build打包到一个main chunk里。比方我开发了一个MyCartComponent：

打包到main chunk后对应的JavaScript代码如下：

如何让一个Angular利用的Component反对lazy load，行将其和main chunk离开进行打包呢？

看个例子。

在AppRoutingModule里，配置路由信息时，不应用惯例的Component属性，而是采纳loadChildren，为某个path动静地指定要加载的Component名称：

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [  {    path: 'customers',    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)  },  {    path: 'orders',    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)  },  {    path: '',    redirectTo: '',    pathMatch: 'full'  }];@NgModule({  imports: [    RouterModule.forRoot(routes)  ],  exports: [RouterModule],  providers: []})export class AppRoutingModule { }

看看customers.module.ts的实现：

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { CustomersRoutingModule } from './customers-routing.module';import { CustomersComponent } from './customers.component';@NgModule({  imports: [    CommonModule,    CustomersRoutingModule  ],  declarations: [CustomersComponent]})export class CustomersModule { }

外面导入了另一个CustomersRoutingModule：

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { CustomersComponent } from './customers.component';const routes: Routes = [  {    path: '',    component: CustomersComponent  }];@NgModule({  imports: [RouterModule.forChild(routes)],  exports: [RouterModule]})export class CustomersRoutingModule { }

这里才是惯例的Angular router定义机制，path和component 字段pair的组合。

执行ng build之后，这次发现main chunk和customers以及orders chunk别离进行打包了，这阐明Customers和Orders的lazy loading启用失效了。

在运行时能看得更分明。浏览器里拜访利用，因为没有关上customers或者orders页面，因而没有加载对应的chunk：

点击customers超链接：

直到此时，才察看到了customers chunk，这就是Angular Component 懒加载模式在运行时的体现成果。

Lazy loading, also known as code splitting, lets you divide your JavaScript code into multiple chunks. The result is that you do not have to load all the JavaScript of the full application when a user accesses the first page. Instead, only the chunks that are required for the given page are loaded. While navigating the storefront, additional chunks are loaded when needed.

code splitting技术产生在application build期间。

Code splitting provided by Angular is typically route-based, which means there is a chunk for the landing page, another chunk for the product page, and so on.

Angular Code split基于路由的，比方landing page调配一个代码chunk，product page调配另一个代码chunk，以此类推。

Since Spartacus is mostly CMS driven, the actual application logic for each route cannot be decided at build time. Business users will eventually alter the page structure by introducing or removing components.

在Spartacus里，每个route的应用逻辑无奈在build阶段通晓，因为Spartacus是CMS驱动的，business user能够通过增加或者移除Component的形式来影响页面构造。


ConfigModule.withConfig({      cmsComponents: {        BannerComponent: {          component: () =>            import('./lazy/lazy-banner.component').then(              (m) => m.LazyBanner            ),        }      }    }),

这个lazy-lazy-banner-component.js.map在哪里？ng build即可看到。

To make code spitting possible, your static JavaScript code (the main app bundle) should not have any static imports to code that you want to lazy load. The builder will notice that the code is already included, and as a result, will not generate a separate chunk for it. This is especially important in the case of importing symbols from libraries.

掂量lazy load的标记就是，builder为code生成独自的chunk.

更多Jerry的原创文章，尽在："汪子熙":