React中组件加载优化

在web开发的时候往往逃不开性能优化问题。所谓的性能优化，直白来讲就是加快系统的响应速度。网络速度是固定的，那最好的解决办法就是减少单次请求文件的大小。这时候就需要对我们的项目文件在生成时做拆包处理。此处推荐一个插件react-loadable来解决这个问题。

npm i react-loadable # 安装插件

没有使用插件之前

在没有使用react-loadable插件之前，我们来看一下react项目中路由切换的时候js文件的加载情况。当做路由切换的时候不会有新的js文件加载，我们所有的js文件在第一次页面初始化的时候已经全部加载进来。

image.png

import Login from "../pages/login";
import PageNotFound from "../pages/page_not_found";
import ArticleList from "../pages/admin/article";
import ArticleEdit from "../pages/admin/article/edit";
...

使用插件之后

可以看到页面切换的时候会加载*.chunk.js文件，这是每一个路由对应的组件在调用的时候被动态加载进来。

image.png

对现有的代码做一个简单的封装即可

utils/loadable.js

import React from "react";
import Loadable from "react-loadable";

const LoadingComponent = () => {
  return <div>加载中</div>;
};

export default (loader, loading = LoadingComponent) => {
  return Loadable({
    loader,
    loading
  });
};

路由组件的引入，注意文件的区别。使用刚才封装好的方法进行对组件调用的简单封装处理。

import loadable from "../utils/loadable";
// import Login from "../pages/login";
// import PageNotFound from "../pages/page_not_found";
// import ArticleList from "../pages/admin/article";
// import ArticleEdit from "../pages/admin/article/edit";

const Login = loadable(() => import("../pages/login"));
const PageNotFound = loadable(() => import("../pages/page_not_found"));
const ArticleList = loadable(() => import("../pages/admin/article"));
const ArticleEdit = loadable(() => import("../pages/admin/article/edit"));