react怎样实现页面代码分割和按需加载

来源：懂视网责编：小采时间：2020-11-27 19:56:20

react怎样实现页面代码分割和按需加载

react怎样实现页面代码分割和按需加载:这次给大家带来react怎样实现页面代码分割和按需加载，react实现页面代码分割和按需加载的注意事项有哪些，下面就是实战案例，一起来看一下。虽然一直有做 react 相关的优化，按需加载、dll 分离、服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天

推荐度：

点击下载本文 文档为doc格式

导读react怎样实现页面代码分割和按需加载:这次给大家带来react怎样实现页面代码分割和按需加载，react实现页面代码分割和按需加载的注意事项有哪些，下面就是实战案例，一起来看一下。虽然一直有做 react 相关的优化，按需加载、dll 分离、服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天

这次给大家带来react怎样实现页面代码分割和按需加载，react实现页面代码分割和按需加载的注意事项有哪些，下面就是实战案例，一起来看一下。

虽然一直有做 react 相关的优化，按需加载、dll 分离、服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天在本地开发时没有测试成功，今天又搞了下，已经部署到线上环境了，今天就这个记录一下。

修改配置

开发环境：webpack@v3 、react-router@v4

安装依赖：

$ yarn add babel-plugin-syntax-dynamic-import -dev

修改 .babelrc 文件：在 plugins 中添加 "syntax-dynamic-import"

改造项目代码

安装依赖：

$ yarn add react-loadable

根据 react-loadable 文档提示，我们需要提供一个载入新页面时的 Loading 组件，同时对加载和超时状态进行区别提示：

import React from 'react';
import { Icon } from 'antd';
const Loading = ({ pastDelay, timedOut, error }) => {
 if (pastDelay) {
 return <p><Icon type="loading" /></p>;
 } else if (timedOut) {
 return <p>Taking a long time...</p>;
 } else if (error) {
 return <p>Error!</p>;
 }
 return null;
};

更改页面组件导入方法：

import React from 'react';
import Loadable from 'react-loadable';
import { Route, Switch } from 'react-router-dom';
const Home = Loadable({
 loader: () => import('../Home'),
 loading: Loading,
 timeout: 10000
});
const EditArticle = Loadable({
 loader: () => import('../EditArticle'),
 loading: Loading,
 timeout: 10000
});
...
<Switch>
 <Route exact path="/home" component={Home} />
 <Route path="/editarticle" component={EditArticle} />
</Switch>

然后打包结果就会分离出各页面代码：