react--懶加載

現在前端新項目大部分都是單頁引用，為了減少首頁加載時間過長很多公司會選擇懶加載或服務端渲染，服務端渲染基本上屬於重構了，不但前端要改大量代碼 后端也要做很多配置處理，耗時比較長

本文主要聊聊懶加載，react版本更新比較快 懶加載主要有四種，有些已廢棄不推薦使用，本文就講最好用、最簡單的一種配置

新建lazy文件夾和lazy/index.js文件，內容如下

import React from 'react'; const asyncComponent = (importComponent) => { return class extends React.Component { constructor() { super(); this.state = { component: null } } componentDidMount() { importComponent() .then(cmp => { this.setState({ component: cmp.default }); }); } render() { const C = this.state.component; return C ? <C {...this.props} /> : null;
 } } }; export default asyncComponent;

route/index.js修改如下

import React from 'react'; import {Switch, Route} from "react-router-dom"; import asyncComponent from '../lazy'; import Home2 from '../pages/Home2'; import OnePage from '../pages/OnePage'; import TwoPage from '../pages/TwoPage'; import This from '../pages/This'; import Mount from '../pages/Mount'; import HooksTest1 from '../hooks/test1'; //import HooksUseState from '../hooks/useState';
const HooksUseState = asyncComponent(() => import ('../hooks/useState')); const Routers = ( <Switch>
        <Route path="/" exact component={Home2} />
        <Route path="/onePage" component={OnePage} />
        <Route path="/twoPage/:id" component={TwoPage} />
        <Route path="/this" component={This} />
        <Route path="/mount"  component={Mount} />
        <Route path="/hooksTest1" component={HooksTest1} />
        <Route path="/hooksUseState" component={HooksUseState} />
    </Switch>
); export default Routers

//import HooksUseState from '../hooks/useState';
const HooksUseState = asyncComponent(() => import ('../hooks/useState'));
修改的就是這兩行第一行是普通加載方式、改成第二行就是懶加載了，只需要把import asyncComponent from '../lazy';引入進來就可以用了，其他頁面如果需要就這樣改就OK了
下面看看瀏覽器里有沒有真的實現懶加載吧，首先啟動項目，默認打開路徑  http://localhost:3000/#/，F12打開控制台，點擊network你應該看到的是這樣的

控制台顯示加載了9個文件，如果你切換路由到其他頁面，控制台的文件不會多加載了，說明我們一開始就把所有的文件都加載完畢了，只有懶加載的沒有加載，然后我們切換到 http://localhost:3000/#/hooksUseState 

控制台多加載了一個JS文件，說明懶加載配置成功~