共计 3478 个字符，预计需要花费 9 分钟才能阅读完成。
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 的原创文章，尽在：” 汪子熙 ”:
