Project environment: windows 10 1089 version create-react-app: 3.0.0 react: 16.8.6 react-router-dom: 5.0.0
Option One
使用 babel-plugin-dynamic-import-node
Principle: Convert import() to require(), and import all asynchronous components synchronously.
Page routing configuration file: Use loadable load file recommended by react-router without any modification
Steps for usage
- Installation package
npm install babel-plugin-dynamic-import-node --save-dev
or
yarn add babel-plugin-dynamic-import-node --dev
- Configure environment variables
Build the .env.development file and .env.production file under the project root directory
.env.development file
NODE_ENV=development
PUBLIC_URL=/
port=8343
.env.production file
NODE_ENV=production
PUBLIC_URL=/
port=8343
- Configuration.babelrc (package.json configuration: just put the following env field object in the "babel" field configuration item)
{
"presets": [
"react-app"
],
// 开发环境下配置项
"env": {
"development": {
"plugins": [
"dynamic-import-node"
]
}
},
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}
- Start the project after yarn start is completed, change the project code to run and compile time comparison
Before
configuration After configuration
Through the comparison of the two pictures, we found that the startup time was reduced from 27.269 seconds to 11.462 seconds, which is more than half faster.
The compilation time of the modified file is reduced from 16.931 seconds to 0.702 seconds, which is more than 20 times faster.
Option II
Manually modify the import method of loading routing components
1. Project file directory
2. Core modification
src/router/loader.js file
import Loadable from "react-loadable";
import Loading from "@/components/Loading";
// 项目中所有页面在views文件下
const devLoader = file => require("@/views/" + file ).default;
const loader = viewPath =>
Loadable({
loader: () => import(`@/views/${
viewPath}`),
loading: Loading
});
const _import = process.env.NODE_ENV === "production" ? loader : devLoader;
export default _import;
3.
Import the loader file in the src/router/modules/appSetting.js file in the routing configuration file
import React from "react";
import loader from "../loader";
// 酒店信息设置
const SettingHotel = loader(`setting/baseSetting`);
// 协议设置
const SettingProtocol = loader(`setting/protocol`);
const routers = [
{
path: "/setting",
title: "设置",
icon: "setting",
redirect: "/setting/base",
forbiddenLink: true,
subRouters: [
{
path: "/setting/base",
component: () => <SettingHotel />,
title: "基础设置"
},
{
path: "/setting/protocol",
component: () => <SettingProtocol />,
title: "协议"
}
]
}
];
export default routers;
4. Start the project after the modification is completed, and modify the project code.
Before and
after the modification,
comparing the two pictures, we found that the startup time was reduced from 27.269 seconds to 14.312 seconds, which was nearly half faster.
The compilation time of the modified file is reduced from 16.931 seconds to 3.696 seconds, which is about five times faster.
Other options
Partial update using react-hot-loader hot loading
The actual experience does not greatly improve the development and compilation speed, which is omitted here.
to sum up
It is recommended to use the first option, which is faster and has fewer side effects.
In the second scheme, the .jsx or .js files under src/views/ will be packaged. Whether you are dependent or not. So this has a side effect, that is, it will pack more and may never use js code. Of course this will only increase the size of the dist or build folder, but will not have any side effects on the online code.
The first solution solves the problem of repeated packaging of the second solution. At the same time, it is also very intrusive to the code. When writing routing, you only need to follow the official document routing lazy loading method, and the rest is left to babel To deal with.