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文件，说明懒加载配置成功~

猜你喜欢