代码分割
代码分割（code splitting）是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
Info
使用 Modern.js 约定式路由时，默认会根据路由组件做代码分割，无需自行进行代码分割。
- 动态
import React.lazyloadable
动态 import
使用动态 import() 语法，传入的 JS 模块将会被被打包到单独的 JS 文件中。例如：
import('./math').then(math => {
console.log(math.add(16, 26));
});React.lazy
React 官方提供的组件代码分割的方式。
Caution
React.lazy 通常配合 <Suspense> 使用，因此仅在 CSR 或 React 18 Streaming SSR 中可用。
对于使用传统 SSR（字符串渲染）的项目，不支持 React.lazy，请使用 Loadable API。
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}React.lazy 更多用法请见 React 官网文档。
Loadable
在 Modern.js 中，可以从 @modern-js/runtime/loadable 中导出使用 Loadable API，示例如下：
import loadable from '@modern-js/runtime/loadable';
const OtherComponent = loadable(() => import('./OtherComponent'));
function MyComponent() {
return <OtherComponent />;
}Modern.js 开箱即用的支持在 SSR 中使用 loadable，无需再添加 Babel 插件，或是在 SSR 时向 HTML 中注入脚本。
但需要注意的是，任何 Loadable API 在 SSR 中都不支持配合 <Suspense> 使用。
Info
如果希望在 React 17 及以下的 CSR 项目中使用 <Suspense>，可以用 loadable.lazy 代替 React.lazy。
更多用法请见 Loadable API。