React.js中的代码拆分
我们使用webpack之类的工具将文件捆绑在React应用程序中。最后，捆绑将文件按照其导入顺序合并，并创建一个文件。
这种方法的问题在于，捆绑文件会随着文件的增加而变大。用户可能无法演唱所有功能部件，但仍在捆绑中加载它们，这可能会影响应用程序的加载。
为了避免这种情况，React中使用了代码拆分。
示例
捆绑示例-
// app.js
import { total } from './math.js';
console.log(total(10, 20)); // 42
//math.js-
export function total(a, b) {
return a + b;
}束
function total(a, b) {
return a + b;
}
console.log(total(10, 20)); // 30代码拆分功能使用延迟加载来仅加载所需的那些文件。这可以大大提高应用程序的性能。
使用动态导入是延迟加载的简单用例-
之前
import { total } from './math';
console.log(total(10, 20));后
import("./math").then(math => {
console.log(math.total(10, 20));
});动态导入仍然不是官方语言标准的一部分。对于babel，我们必须使用 babel-plugin-syntax-dynamic-import。
React.lazy帮助延迟导入组件。
import TestComponent from './ TestComponent ';
function LazyComponentLoadExample() {
return (
<div>
< TestComponent />
</div>
);
}后
const TestComponent = React.lazy(() => import('./TestComponent'));
function LazyComponentLoadExample() {
return (
<div>
<TestComponent />
</div>
);
}使用悬念
这是回退内容，直到组件的延迟加载完成为止
const TestComponent = React.lazy(() =>import('./TestComponent'));
function SuspenseComponentExample() {
return (
<div>
<Suspense fallback = {<div>Loading...</div>}>
<TestComponent />
</Suspense>
</div>
);
}基于路由的代码拆分
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Customer = lazy(() = > import('./routes/Customer'));
const Admin = lazy(() = > import('./routes/Admin'));
const App = () = > (
<Router>
<Suspense fallback = {<div>Loading...</div>}>
<Switch>
<Route exact path = "/" component = {Customer}/>
<Route path = "/admin" component = {Admin}/>
</Switch>
</Suspense>
</Router>
);由于React.lazy仅支持默认导出，因此使用中间导出处理命名的导出，中间导出将默认导出。