数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物学
数学
英语
经济学
心理学
社会科学
时尚研究
法律研究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 仅支持默认导出，因此命名导出是通过作为默认导出的中间导出进行处理的。
更新时间： 2019-08-28
223 次浏览
广告