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

安裝

yarn add react-loadable

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

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;

運行項目查看network記錄

image.png

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

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

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

import React from "react";

import Loadable from "react-loadable";

const loadingComponent = () => {

return

loading;

};

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

return Loadable({

loader,

loading,

});

};

接收一個配置對象為參數,第一個屬性名為loader，是一個方法，用于動態加載我們所需要的模塊，第二個參數就是我們的Loading組件咯，在動態加載還未完成的過程中會有該組件占位。

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

在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;

運行項目查看network記錄

image.png

這個時候1.chunk.js是1.0MB，因為只加載所需的依賴，工作原理其實就是在頁面組件上有包了一成高級組件來代替原來的頁面組件

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。