代码分割是优化前端资源加载的一种常用手段,本文将介绍 Modern.js 支持的三种代码分割方式:
INFO
使用 Modern.js 约定式路由时,默认会根据路由组件做代码分割,包裹 Suspense
组件,无需自行进行代码分割。
import
React.lazy
loadable
使用动态 import()
语法,import
接收的 JS 模块将作为一个新的打包入口被打包到单独的 JS 文件中。例如:
import('./math').then(math => {
console.log(math.add(16, 26));
});
./math
路径对应的 JS 模块会被打包到单独的 JS 文件中。
React 官方提供的组件代码分割的方式。
CAUTION
React 17 及以下版本不支持 SSR,建议 React17 的 SSR 应用使用 loadable。
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 lazy。
使用 loadable
API,示例如下:
import loadable from '@modern-js/runtime/loadable';
const OtherComponent = loadable(() => import('./OtherComponent'));
function MyComponent() {
return <OtherComponent />;
}
loadable
更多用法请见 loadable API。
INFO
loadable
开箱即用的支持 SSR,但不支持和 Suspense 一起使用,如果是 CSR 项目可以使用 loadable.lazy