react快速开始(四)-之Vite 还是 (Create React App) CRA? 用Vite创建项目

文章目录

  • react快速开始(四)-之Vite 还是 (Create React App) CRA? 用Vite创建项目
    • 背景
    • Vite 和 (Create React App) CRA
    • Vite?
      • Vite 是否支持 TypeScript?
    • 用Vite创建react项目
    • 参考

react快速开始(四)-之Vite 还是 (Create React App) CRA? 用Vite创建项目

背景

在React文档中,对于构建新的React应用,首推的方式是CRA(create-react-app)。

CRA推出于2016年,彼时还没有成体系的React脚手架工具供大家使用,再加上这是官方工具,一经推出就受到了欢迎。截止当前,CRA仓库已经收获快10wstar。

绝大多数项目都依赖于 Create React App,主要是因为这个特定的解决方案是由最流行的前端应用程序开发库 React 的创建者推动的。CRA 是 React 文档中的默认选择,对于许多开发人员来说,它仍然是默认选项。

在构建 React 应用程序(初学者、中级甚至专家)时,创建 React 应用程序 (CRA) 长期以来一直是所有技能水平的许多开发人员的首选工具。但是,它确实有一些明显的缺点,即速度和性能。

此外,CRA对一些流行工具的支持也不是很好,比如在TailwindCSS文档中就不推荐使用CRA。

Create React App(下文简称CRA)和Vite(发音为veet,是法语单词,意为“快速”)都是帮助你创建React应用的工具。

Vite 和 (Create React App) CRA

为什么我们使用 Vite 而不是 Create React App
参考URL: https://makimo.com/blog/why-we-use-vite-instead-of-create-react-app/
create-react-app vs vite
参考URL: https://npmtrends.com/create-react-app-vs-vite

npm trends:
在这里插入图片描述
使用Vite,你会收获以下好处:

  • 开发速度显著提升,让你可以更有效率地进行开发。
  • 构建体积更小,让你的应用程序加载更快。
  • 开发体验更好,让你可以更轻松愉快地进行开发。

最近(2024年),国外网友 t3dotgg 建议 React 官方把文档中关于建议使用 Create React App 来创建新项目更换为建议使用 Vite 来创建新项目。

Vite?

Vite官方中文文档: https://cn.vitejs.dev/guide/why.html

Vite将一个应用分为两个部分:依赖和源码。

  • 依赖
    依赖在开发过程中,基本不会变动。Vite使用esbuild(基于Go语言,比传统JS要快10-100倍)预打包了依赖,而且由于依赖变动极少,所以会被缓存起来以节省大量时间。

  • 源码
    源码采用了ESM(ECMAScript modules)作为模块体系。好处是无需打包,按需加载,所以速度快的难以置信。

Esbuild是一个用 Go 编写的 Javascript 构建工具,它预先打包依赖项的速度比基于 Javascript 的打包工具快 10-100 倍。

Vite 是一款新一代的前端构建工具,专为闪电般的开发速度和高效构建而设计。它采用了一种创新性的开发模式,与传统的 webpack 相比,显著提升了开发和构建的效率。

Vite速度快且配置简单!Vite 采用了创新的开发模式和更有效的构建算法,提供更快的开发速度和更小的构建体积

Vite 是否支持 TypeScript?

是的,Vite 完全支持 TypeScript,你可以使用 TypeScript 构建你的 React 应用程序。

用Vite创建react项目

为创建一个 Vite应用程序,打开终端并导航到要保存 Vite 程序的文件夹。然后运行这个命令:

npm create vite@latest
npm create vite 项目名称

设置 Project name、Select a framework(选择框架)选react

√ Project name: ... web3-todo-list
? Select a framework: » - Use arrow-keys. Return to submit.
>   VanillaVueReactPreactLit
√ Select a variant: » TypeScriptScaffolding project in D:\web3\openbuild\Web3-Frontend-Bootcamp\members\dockershe\task1\web3-todo-list...    Done. Now run:cd web3-todo-listnpm installnpm run dev

参考

React为什么不将Vite作为默认推荐?
参考URL: https://cloud.tencent.com/developer/article/2223154
Create React App 被 React 官方抛弃了吗?
参考URL: https://developer.aliyun.com/article/1207234

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22342.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java面向对象笔记

多态 一种类型的变量可以引用多种实际类型的对象 如 package ooplearn;public class Test {public static void main(String[] args) {Animal[] animals new Animal[2];animals[0] new Dog();animals[1] new Cat();for (Animal animal : animals){animal.eat();}} }class …

MeshFusion Pro : Ultimate Optimization Tool

MeshFusion Pro是Unity的强大优化工具,它使用一种高效的方法来组合对象,以减少绘制调用并提高FPS。 MeshFusion Pro可用于组合静态对象以及LODGroups。您还可以创建动态组合对象,其中每个单独的网格都可以在运行时移动,新的组合网格将自动更新。在保持单个网格自由度的同时…

【数据结构与算法 | 二叉树篇】力扣101, 104, 111

1. 力扣101 : 对称二叉树 (1). 题 给你一个二叉树的根节点 root , 检查它是否轴对称。 示例 1: 输入:root [1,2,2,3,4,4,3] 输出:true示例 2: 输入:root [1,2,2,null,3,null,3] 输出:false…

Java1.8语言+ springboot +mysql + Thymeleaf 全套家政上门服务平台app小程序源码

Java1.8语言 springboot mysql Thymeleaf 全套家政上门服务平台app小程序源码 家政系统是一套可以提供上门家政、上门维修、上门洗车、上门搬家等服务为一体的家政平台解决方案。它能够与微信对接、拥有用户端小程序,并提供师傅端app,可以帮助创业者在…

树的算法基础知识

什么是树: 树是n(n>0)个结点的有限集。n0时称为空树。在任意一棵非空树中: 有且仅有一个特定的称为根的结点当n>1时,其余结点可分为m(m>0)个互不相交的有限集T1、T2、......、Tm&…

ElasticSearch学习笔记之三:Logstash数据分析

第3章 Logstash数据分析 Logstash使用管道方式进行日志的搜集处理和输出。有点类似*NIX系统的管道命令 xxx | ccc | ddd,xxx执行完了会执行ccc,然后执行ddd。 在logstash中,包括了三个阶段: 输入input --> 处理filter(不是必须…

异或炸弹(easy)(牛客小白月赛95)

题目链接: D-异或炸弹(easy)_牛客小白月赛95 (nowcoder.com) 题目: 题目分析: 一看 还以为是二维差分的题呢 到后来才发现是一维差分问题 这里的距离是 曼哈顿距离 dis abs(x - xi) abs(y - yi) 暴力的做法 就是枚举 n * n 个…

word-海报制作

1、确定海报的尺寸大小 2、创建主题颜色 设计-颜色-自定义颜色-柑橘rgb值改变着色1-着色6的颜色 3、将文字添加至文本框,更改字体颜色、大小和格式 4、添加背景水印:插入-形状-文本框 5、组合全部元素 图片素材网址:

Spark Streaming 概述及入门案例

一、介绍 1. 不同的数据处理 从数据处理的方式: 流式数据处理(Streaming)批量数据处理(Batch) 从数据处理的延迟: 实时数据处理(毫秒级别)离线数据处理(小时或天级别) 2. 简介 SparkStreaming 是一个准实时(秒或分钟级别)、微批量的数据处理框架Spa…

系统架构设计师【第19章】: 大数据架构设计理论与实践 (核心总结)

文章目录 19.1 传统数据处理系统存在的问题19.2 大数据处理系统架构分析19.2.1 大数据处理系统面临挑战19.2.2 大数据处理系统架构特征 19.3 Lambda架构19.3.1 Lambda架构对大数据处理系统的理解19.3.2 Lambda架构应用场景19.3.3 Lambda架构介绍19.3.4  Lambda架构的实…

内网安全:横向传递攻击(PTH || PTK || PTT 哈希票据传递)

内网安全:横向传递攻击. 横向移动就是在拿下对方一台主机后,以拿下的那台主机作为跳板,对内网的其他主机再进行后面渗透,利用既有的资源尝试获取更多的凭据、更高的权限,一步一步拿下更多的主机,进而达到控…

CodeMirror 创建标签计算编辑器

在日常开发中对于一些数据计算场景可能会遇到标签计算的需求&#xff0c;下面关于如何使用CodeMirror实现标签计算编辑功能。 1&#xff0c;结果图 2&#xff0c;主体代码逻辑 大家只需要复制粘贴主要codeMirror使用逻辑即可 <template><el-dialogref"dialogRe…

抖店商家疑惑,自然流量突然下滑,为什么呢?

大家好&#xff0c;我是喷火龙。 很多的抖店商家会遇到一种情况&#xff0c;那就是自己店铺的流量好好的&#xff0c;不知道怎么的就突然没流量了&#xff0c;各方面的数据都断崖式的下降。 为什么会这样呢&#xff1f;原因有以下几点&#xff0c;大家可以检查一下&#xff0…

低代码和零代码软件时代质量管理(QM)和质量管理系统(QMS)

【前言】 质量控制过程的目的是为了确保产品的制造标准得到保持和改进。质量控制过程使公司能够满足客户的期望&#xff0c;同时确保产品质量的一致水平。采用这些标准创造了一种公司文化&#xff0c;鼓励所有员工努力实现高质量的生产标准。低代码和零代码软件可以成为质量控…

【网络通信层】华为云连接MQTT设备

本文介绍华为云设备连接到设备的操作。 目录 一、在华为云创建设备 二、连接MQTT 三、通信 一、在华为云创建设备 现在华为云上可以免费使用部分受限服务&#xff0c;包括免费创建自己的设备连接。 首先&#xff0c;登录华为云平台共建智能世界云底座-华为云 (huaweicl…

Qt Window Dialog 无标题栏 ,无边框,可拖动

1.效果&#xff1a; 2. 主要实现步骤&#xff1a; 设置窗口 flag&#xff1a; this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint); 创建变量存储位置 QPoint m_dragPosition; 对鼠标左键按下和移动事件做处理 void DraggableDialog::mousePre…

Web 页面性能衡量指标-以用户为中心的效果指标

Web 页面性能衡量指标-以用户为中心的性能指标 以用户为中心的性能指标是理解和改进站点体验的关键点 一、以用户为中心的性能指标 1. 指标是用来干啥的&#xff1f; 指标是用来衡量性能和用户体验的 2. 指标类型 感知加载速度&#xff1a;网页可以多快地加载网页中的所有…

如何在vs code中安装JavaFX

目录 下载JavaFX 配置vs code工程 编写测试代码 下载JavaFX 网站链接:https://openjfx.io 选择如下的版本

从1.0到4.0,看看你公司的费控模式是第几代?

早在2021年9月&#xff0c;艾媒咨询在《2021H1企业费控报销服务专题研究报告》中&#xff0c;第一次对企业费用管控模式的进化历程进行了清晰的划代&#xff1a;1.0手工模式、2.0网报模式、3.0移动报销模式、4.0智能费控模式。 2022年&#xff0c;在《中国企业费用管理发展白皮…

vr样板房实景漫游展示制作解决了地产商难题

家具和软装销售中&#xff0c;如何直观展示产品优势一直是老板们的难题。口头描述往往难以让客户真正感受到产品的独特之处&#xff0c;这不仅影响了销售效果&#xff0c;也增加了沟通的难度。但现在&#xff0c;我们有了全新的解决方案——样板房VR全景编辑软件! 样板房VR全景…