正如标题,react 项目在打包完成后发现 chunk.js 文件比较大,导致打开首页需要时间比较久,因此,需要进行优化。 其实仔细考虑一下不难发现,由于打包后将所有资源都打包到了一个 chunk.js 下,导致所有资源都一起加载了,所以,进入页面会很慢。咱们的预期目标是进入首页只加载首页的资源,进入详情页至加载详情页的资源。那么,react-loadable 是你不错的选择。
1、首先,要想使用它需要先安装它。 1 2 yarn add react-loadable yarn add babel-plugin-syntax-dynamic-import
根据 npm 官网找到 react-loadable 完成配置,当然我为了以后方便使用对 react-loadable 进行了封装。
2 其次,在 utils 文件夹下新建 loadable.js 文件,配置如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import React from "react"; import { Spin } from 'antd'; import Loadable from "react-loadable"; import './index.less' // 加载动画 const loadingComponent = () => { return <div className={'spin-loading'}> <div><Spin size="large" /></div> </div>; }; // 当不传加载动画时候使用默认的加载动画 export default (loader, loading = loadingComponent) => { return Loadable({ loader, loading, }); };
3、在 index.js 文件里配置路由时候就可以使用如下方式进行懒加载处理 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import * as serviceWorker from "./serviceWorker"; import { BrowserRouter as Router, Route } from "react-router-dom"; import { createBrowserHistory } from "history"; import loadable from './utils/loadable' const App = loadable(() => import("./router/login/App")); const MoveVideo = loadable(() => import("./router/video")); const UserReg = loadable(() => import("./router/userReg/index")); const FoodList = loadable(() => import("./router/food/index")); ReactDOM.render( <Router history={createBrowserHistory()}> <Route exact path="/" component={App} /> <Route path="/user-reg/" component={UserReg} /> <Route path="/food-list" component={FoodList} /> <Route path="/video" component={MoveVideo} /> </Router>, document.getElementById("root") ); serviceWorker.unregister();
4、再次进行打包编译,就会发现多出很多 chunk.js 文件,这就是从原来一个拆成多个,这样加载速度就会得到提升。