create-react-app 开发环境编译太慢的解决方案
项目环境: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 开发环境编译太慢的解决方案相关推荐
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- 在windows上搭建React Native开发环境
最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境. React Native相关项目及文档: react-native的GitHub ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- windows 下配置 react native 开发环境
windows 下配置 react native 开发环境 安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
最新文章
- robotium常用方法
- 一篇综述带你全面了解迁移学习的领域泛化(Domain Generalization)
- 《研磨设计模式》chap3 外观模式Facade
- 转: java多线程-ThreadPoolExecutor的拒绝策略RejectedExecutionHandler
- Windows下设置开机自启动的方式(手动/C++代码的形式)
- python machinelearning下载_Python与机器学习系列1:Anaconda的下载与安装
- python导入自定义函数_python怎么导入自定义函数
- Confluence 6 教程:在 Confluence 中导航
- java中return提醒不兼容的_JAVA报return为不兼容类型
- cisco将计算机配置为vlan2,Cisco交换机 VLAN 的建立与端口分配
- c语言 截止频率6低通滤波器,用Verilog在FPGA上实现低通滤波器
- f28335的c语言结构体,TMS320F28335程序SVPWM源程序
- 8.2 向量数量积与向量积(点乘与叉乘)
- linux go vendor目录,golang使用govendor教程
- The server encountered an unexpected condition that prevented it from fulfilling the request
- matlab [c, lags]=xcorr(y1,y2) 转python
- 【2020-8-9】APM,PX4,GAZEBO,MAVLINK,MAVROS,ROS之间的关系以及科研设备选型
- latex三线表绘制,合并行与列
- UNIX环境高级编程-环境配置
- F. Floor Plan
热门文章
- 七号信令:信令网基本概念
- unity 游戏版本更新插件
- abaqus算出来的转角单位是什么_ABAQUS中的单位制是如何规定的
- 核电安全级数字化仪控系统内存诊断设计与实现
- 2013职称计算机试题,2013年职称计算机Word试题及答案(三)
- 浏览器网页操作 EXCEL 示例
- Android.light.apk,Android_Lightblue.apk
- win10读取linux硬盘,win10怎么读取lxext4格式硬盘
- 一键解决局域网共享之批处理
- win7局域网共享设置_分享几个简单实用的局域网共享设置工具