React 項(xiàng)目打包時(shí)，如果不進(jìn)行異步組件的處理，那么所有頁面所需要的 js 都在同一文件中(bundle.js)，整個(gè)js文件很大，從而導(dǎo)致首屏加載時(shí)間過長(zhǎng).所有，可以對(duì)組件進(jìn)行異步加載處理，可以使用 React-loadable實(shí)現(xiàn)。

安裝

yarn add react-loadable

在沒有使用react-loadable之前，在我們的router.js里面是直接import Login這個(gè)組件的

import React from "react";

import {

BrowserRouter as Router,

Route,

Switch

} from "react-router-dom";

import Login from "../pages/Login/Login";

class RouteConfig extends React.Component {

render() {

return (

);

}

}

export default RouteConfig;

運(yùn)行項(xiàng)目查看network記錄

image.png

可以看到1.chunk.js是1.5MB

現(xiàn)在我們來添加react-loadable(可通過上面安裝方法安裝)

完后在src/utils 下新建一個(gè)公共封裝的loadable.js，代碼如下：

import React from "react";

import Loadable from "react-loadable";

const loadingComponent = () => {

return

loading;

};

export default (loader, loading = loadingComponent) => {

return Loadable({

loader,

loading,

});

};

接收一個(gè)配置對(duì)象為參數(shù),第一個(gè)屬性名為loader，是一個(gè)方法，用于動(dòng)態(tài)加載我們所需要的模塊，第二個(gè)參數(shù)就是我們的Loading組件咯，在動(dòng)態(tài)加載還未完成的過程中會(huì)有該組件占位。

我們可以將按需加載的組件和過渡組件通過參數(shù)傳入最后返回包裝后的組件

在router.js里面做如下修改

import React from "react";

import {

BrowserRouter as Router,

Route,

Switch

} from "react-router-dom";

const Login = loadable(() => import("../pages/Login/Login"));

class RouteConfig extends React.Component {

render() {

return (

);

}

}

export default RouteConfig;

運(yùn)行項(xiàng)目查看network記錄

image.png

這個(gè)時(shí)候1.chunk.js是1.0MB，因?yàn)橹患虞d所需的依賴，工作原理其實(shí)就是在頁面組件上有包了一成高級(jí)組件來代替原來的頁面組件

總結(jié)

以上是生活随笔為你收集整理的react实现异步插件_React-loadable实现组件进行异步加载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。