資料結構
網路
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 次瀏覽
廣告