項目環境：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

or

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;

4.修改完成后啟動項目，并修改項目代碼
修改前

修改后

通過兩張圖對比我們發現啟動時間從27.269秒減少到14.312秒，快了近一半。
修改文件編譯時間從16.931秒減少到3.696秒，快了五倍左右。

其他方案

采用react-hot-loader熱加載局部更新

實際體驗對開發編譯速度提升不大，此處略。

總結

推薦使用第一種方案，除了速度快，副作用也比較少。

第二種方案src/views/下的 .jsx或.js 文件都會被打包。不管你是否被依賴。所以這樣就產生了一個副作用，就是會多打包一些可能永遠都用不到 js 代碼。當然這只會增加 dist或build文件夾的大小，但不會對線上代碼產生任何的副作用。

第一種方案解決了第二種方案重復打包的問題，同時對代碼的侵入性也很小，平時寫路由的時候只需要按照官方文檔路由懶加載的方式就可以了，其它的都交給babel來處理。

總結

以上是生活随笔為你收集整理的create-react-app 开发环境编译太慢的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。