在大型应用中我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件，这个时候我们就用到了异步组件。
Angular 的异步组件
在 Angular v17 之前的版本中并没有异步组件的实现方法，类似的功能被称之为懒加载模块。要使用懒加载模块，需要配合路由使用。Angular 并不是一个渐近式的框架，它拥有一个完整的应用生态，路由的概念暂时不在本系列文章的讨论范围。关于懒加载模块的介绍请参考 惰性加载特性模块 。
在 v17 版本中，Angular 新增一个 可延迟视图 的功能，通过这个功能我们可以轻松实现异步组件的加载。这个功能是使用 @defer 块来实现的，并且它拥有 @placeholder @loading @error 这几个子块。
下面的例子展示了如何异步加载广告条组件。
ad.component.ts 文件
import { Component } from '@angular/core';
@Component({
selector: 'app-ad',
template: `
<h2>异步加载广告条</h2>
<label>
<input type="checkbox" [(ngModel)]="showAd" />
允许显示广告
</label>
<div class="ad">
@defer (when showAd) {
<app-ad-a></app-ad-a>
}
</div>
`
})
export class AdComponent {
showAd = false;
}
ad.banner.component.ts 文件
import { Component } from '@angular/core';
@Component({
selector: 'app-ad-banner',
template: `
<div>
<p>Ad Banner</p>
</div>
`
})
export class AdBannerComponent {
}
如果需要使用 @defer 的相关子块，可参考下面的代码：
// @placeholder
@defer {
<large-component />
} @placeholder (minimum 500ms) {
<p>Placeholder content</p>
}
// @loading
@defer {
<large-component />
} @loading (after 100ms; minimum 1s) {
<img alt="loading..." src="loading.gif" />
}
// @error
@defer {
<calendar-cmp />
} @error {
<p>Failed to load the calendar</p>
}
React 的异步组件
在 React 中，使用 lazy 方法 和 Suspense 内置组件来实现异步组件的加载。
下面的例子展示了如何异步加载广告条组件。
Ad.js 文件
import React from "react";
import { useState, lazy, Suspense } from 'react';
import Loading from './Loading';
const AdBanner = lazy(() => delayForDemo(import('./AdBanner.js')));
export default function Ad() {
const [showAd, setShowAd] = useState(false);
return (
<div>
<h2>异步组件</h2>
<label>
<input type="checkbox" checked={showAd} onChange={e => setShowAd(e.target.checked)} />
允许显示广告
</label>
<hr />
{showAd && (
<Suspense fallback={<Loading />}>
<h2>广告</h2>
<AdBanner />
</Suspense>
)}
</div>
)
}
// 添加一个固定的延迟时间，以便你可以看到加载状态
function delayForDemo(promise) {
return new Promise(resolve => {
setTimeout(resolve, 2000);
}).then(() => promise);
}
Loading.js 文件
export default function Loading() {
return <p><i>Loading...</i></p>;
}
AdBanner.js 文件
export default function AdBanner() {
return (
<div>
<p>Ad Banner</p>
</div>
)
}
Vue 的异步组件
在 Vue 中，使用 defineAsyncComponent 方法来异步加载组件，它也可以配合 <Suspense> 内置组件来使用，不过 <Suspense> 目前尚是一项实验性功能，下面的例子中我们暂且不使用 <Suspense> 。
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>
小结
在三大框架中，只有 Vue 明确提出了异步组件的概念，在 Angular 与 React 中并没有异步组件的概念。异步组件我们可以理解成按需加载，它通常在大型应用或对初始页面加载时间有极速要求的前提下才会用到。
Angular 通过 @defer 块能够实现异步加载组件，它还拥有几个子块可以处理延迟加载过程中的不同阶段。
React 通过 lazy 方法能够让你在组件第一次被渲染之前延迟加载组件的代码，它通常配合 <Suspense> 内置组件使用。
Vue 提供了 defineAsyncComponent 方法来异步加载组件，它也可以配合 <Suspense> 内置组件来使用，不过 <Suspense> 目前尚是一项实验性功能，不建议在生产环境中使用。
文章参考链接：
- https://angular.cn/guide/lazy-loading-ngmodules
- https://angular.cn/guide/ngmodules
- https://angular.dev/guide/defer
- https://zh-hans.react.dev/reference/react/lazy
- https://zh-hans.react.dev/reference/react/Suspense
- https://cn.vuejs.org/guide/components/async.html
- https://cn.vuejs.org/guide/built-ins/suspense.html
