create-react-app 开发环境编译太慢的解决方案

article/2025/10/31 15:38:51

项目环境：windows 10 1089版本 create-react-app：3.0.0 react：16.8.6 react-router-dom：5.0.0

方案一

使用 babel-plugin-dynamic-import-node

原理：转换 import()为 require()，将所有异步组件都用同步的方式引入
页面路由配置文件：使用react-router推荐的loadable加载文件，不做任何修改

使用步骤

安装包

npm install babel-plugin-dynamic-import-node --save-dev

yarn add babel-plugin-dynamic-import-node --dev

配置环境变量

项目根目录下建 .env.development文件和.env.production文件

.env.development 文件

NODE_ENV=development
PUBLIC_URL=/
port=8343

.env.production文件文件

NODE_ENV=production
PUBLIC_URL=/
port=8343

配置 .babelrc （package.json配置：把下面env字段对象放到"babel"字段配置项里就好）


{"presets": ["react-app"],// 开发环境下配置项"env": {"development": {"plugins": ["dynamic-import-node"]}},"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}],["import",{"libraryName": "antd","libraryDirectory": "es","style": "css"}]]
}

启动项目 yarn start 完成后改变项目代码运行编译时间对比
配置前

配置后

通过两张图对比我们发现启动时间从27.269秒减少到11.462秒，快了一半多。
修改文件编译时间从16.931秒减少到0.702秒，快了20多倍。

方案二

手动修改加载路由组件的导入方法
1.项目文件目录
在这里插入图片描述

2.核心修改
src/router/loader.js 文件

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.在路由配置文件中
src/router/modules/appSetting.js 文件中导入loader文件

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;