成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 按需加載 - 代碼分隔

lncwwn / 2147人閱讀

摘要：使用動(dòng)態(tài)之前使用動(dòng)態(tài)后注意，動(dòng)態(tài)并不是標(biāo)準(zhǔn)的，所以需要配置可以以一個(gè)標(biāo)準(zhǔn)組件的方法渲然一個(gè)動(dòng)態(tài)引入的組件。以前的做法使用這樣在組件渲然的時(shí)候才加載。

代碼分隔

我們現(xiàn)在大多數(shù)React項(xiàng)目都是以Webpack 或者 Browserify等將一堆的jsx文件組織一起，并且由一個(gè)類似index.js的入口文件串聯(lián)起來的單頁面web頁面。

例如：

// math.js
export function add(a, b) {
  return a + b;
}

App:

// app.js
import { add } from "./math.js";

console.log(add(16, 26)); // 42

打完包后：

function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

從這個(gè)例子可以看出，打完包后將所有的js都?jí)嚎s到一個(gè)文件里了。隨著項(xiàng)目越來越大，打包的文件也會(huì)越來越大，如果再引入一些第三方的js庫，那就更龐大了。

接下來介紹一下如何將React代碼分隔。（以下內(nèi)容是16.6.0版本才支持的）

Code Splitting會(huì)幫助你的應(yīng)用實(shí)現(xiàn)lazy load.

這么做，即使沒有減少整個(gè)項(xiàng)目的代碼量，也會(huì)避免在項(xiàng)目初始加載時(shí)，加載沒必須的js,從而使用項(xiàng)目性能有所提升。

import()

最簡單直接的方式就是引入動(dòng)態(tài) import 實(shí)現(xiàn)代碼分隔。

使用 動(dòng)態(tài) import 之前：

import { add } from "./math";

console.log(add(16, 26));

使用動(dòng)態(tài) import 后：

import("./math").then(math => {
  console.log(math.add(16, 26));
});
注意，動(dòng)態(tài) import 并不是標(biāo)準(zhǔn)的EcmaScript，所以需要配置 babel-plugin-syntax-dynamic-import
React.lazy

React.lazy 可以以一個(gè)React標(biāo)準(zhǔn)組件的方法渲然一個(gè)動(dòng)態(tài)引入的組件。

以前的做法：

import OtherComponent from "./OtherComponent";

function MyComponent() {
  return (
    

      
    

  );
}

使用 React.lazy ：

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    

      
    

  );
}

這樣在組件MyComponent渲然的時(shí)候才加載OtherComponent。

React.lazy 必須使用動(dòng)態(tài) import() 引入組件，必須返回一個(gè) Promise Component。

React.lazy 目前不支持服務(wù)端渲然
Suspense

假如在 React.lazy 時(shí)，import 失敗或者異常時(shí)，我們需要給于提示，或者一個(gè)默認(rèn)的組件，我們就需要使用 Suspense .

例如：

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    

      Loading...
}>
); }

fallback 也是一個(gè)組件，但不能通過 動(dòng)態(tài) import 引入的組件.

Suspense 只能包裹一個(gè)單結(jié)點(diǎn)，如果有多個(gè) 動(dòng)態(tài) import 的組件需要放在一個(gè) Suspense 中時(shí)，可以使用類似 React.Fragmet 包裹一下，也可以使用其他的 React 組件包裹。例如：

const OtherComponent = React.lazy(() => import("./OtherComponent"));
const AnotherComponent = React.lazy(() => import("./AnotherComponent"));

function MyComponent() {
  return (
    

      Loading...
}>
); } 基于Router的代碼分隔

基于 Router 的代碼分隔，也是我們通常所說的按需加載。是我們推薦的方式。

例如：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";

const Home = lazy(() => import("./routes/Home"));
const About = lazy(() => import("./routes/About"));

const App = () => (
  
    Loading...
}> ); Named Exports

React.lazy 目前只支持 default 導(dǎo)出，不支持命名導(dǎo)出。例如，只支持：

export default () => {
  return(
I am a Lazy component
);
}

如果要支持命令導(dǎo)出，需要重新再 export ,例如：

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from "react";
const MyComponent = lazy(() => import("./MyComponent.js"));

推薦閱讀 《React 手稿》

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99906.html

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<