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

最新推荐文章于 2025-03-11 17:29:12 发布

置顶 xiaofei0627

最新推荐文章于 2025-03-11 17:29:12 发布

阅读量1.5w

点赞数 4

分类专栏： react create-react-app 那些年写过的企业级中后台vue,react组件文章标签： react create-react-app 开发编译慢

本文链接：https://blog.youkuaiyun.com/qq_39953537/article/details/93611371

版权

那些年写过的企业级中后台vue,react组件同时被 3 个专栏收录

10 篇文章

订阅专栏

react

8 篇文章

订阅专栏

create-react-app

2 篇文章

订阅专栏

本文介绍两种有效提升React应用启动和编译速度的方法。一是利用babel-plugin-dynamic-import-node转换import()为require()，实现异步组件同步加载；二是手动修改路由组件导入方式，结合react-loadable进行按需加载。对比显示，第一种方案启动时间减少一半以上，编译时间提速20多倍；第二种方案启动时间减少近一半，编译时间提速五倍左右。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目环境：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;