項(xiàng)目環(huán)境：windows 10 1089版本 create-react-app：3.0.0 react：16.8.6 react-router-dom：5.0.0

方案一

使用 babel-plugin-dynamic-import-node

原理：轉(zhuǎn)換 import()為 require()，將所有異步組件都用同步的方式引入
頁(yè)面路由配置文件：使用react-router推薦的loadable加載文件，不做任何修改

使用步驟

安裝包

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

or

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

配置環(huán)境變量

項(xiàng)目根目錄下建 .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字段對(duì)象放到"babel"字段配置項(xiàng)里就好）

{"presets": ["react-app"],// 開(kāi)發(fā)環(huán)境下配置項(xiàng)"env": {"development": {"plugins": ["dynamic-import-node"]}},"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}],["import",{"libraryName": "antd","libraryDirectory": "es","style": "css"}]] }

啟動(dòng)項(xiàng)目 yarn start 完成后改變項(xiàng)目代碼運(yùn)行編譯時(shí)間對(duì)比
配置前

配置后

通過(guò)兩張圖對(duì)比我們發(fā)現(xiàn)啟動(dòng)時(shí)間從27.269秒減少到11.462秒，快了一半多。
修改文件編譯時(shí)間從16.931秒減少到0.702秒，快了20多倍。

方案二

手動(dòng)修改加載路由組件的導(dǎo)入方法
1.項(xiàng)目文件目錄

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

import Loadable from "react-loadable"; import Loading from "@/components/Loading";// 項(xiàng)目中所有頁(yè)面在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 文件中導(dǎo)入loader文件

import React from "react"; import loader from "../loader";// 酒店信息設(shè)置 const SettingHotel = loader(`setting/baseSetting`); // 協(xié)議設(shè)置 const SettingProtocol = loader(`setting/protocol`);const routers = [{path: "/setting",title: "設(shè)置",icon: "setting",redirect: "/setting/base",forbiddenLink: true,subRouters: [{path: "/setting/base",component: () => <SettingHotel />,title: "基礎(chǔ)設(shè)置"},{path: "/setting/protocol",component: () => <SettingProtocol />,title: "協(xié)議"}]} ];export default routers;

4.修改完成后啟動(dòng)項(xiàng)目，并修改項(xiàng)目代碼
修改前

修改后

通過(guò)兩張圖對(duì)比我們發(fā)現(xiàn)啟動(dòng)時(shí)間從27.269秒減少到14.312秒，快了近一半。
修改文件編譯時(shí)間從16.931秒減少到3.696秒，快了五倍左右。

其他方案

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

實(shí)際體驗(yàn)對(duì)開(kāi)發(fā)編譯速度提升不大，此處略。

總結(jié)

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

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

第一種方案解決了第二種方案重復(fù)打包的問(wèn)題，同時(shí)對(duì)代碼的侵入性也很小，平時(shí)寫(xiě)路由的時(shí)候只需要按照官方文檔路由懶加載的方式就可以了，其它的都交給babel來(lái)處理。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。