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.rhkb.cn/news/347724.html

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

相关文章

C# WinForm —— 33 ContextMenuStrip介绍

1. 简介 右键某个控件/窗体时,弹出来的菜单,比如VS中右键窗体,弹出来的这个菜单: 和MenuStrip类似,ContextMenuStrip主菜单下面可以有子菜单,子菜单下面可以有下一级子菜单 2. 属性 和MenuStrip一样 …

Java的一些补充性介绍

目录 什么是JDK,JRE 快速入门 学习路线: 如何快速掌握技术或知识点: IDEA 常用快捷键 IDEA创建项目、模块、包、类 模板/自定义模板 包 包的命名:​编辑 常用的包 如引入包 断点调试(debug)​编辑 多线程:…

i.MX8MP平台开发分享(RDC软件配置篇)

Uboot中已经将RDC的配置写入到了OCRAM中,NXP在ATF中预设了SIP服务,SIP服务下有厂商自定义的smc命令ID。例如下面的DDR、GPC、SRC和HAB的smc回调函数。 在SRC中断处理函数中,对于SRC_M4_START指令,先读取OCRAM中的配置,…

Hadoop3:MapReduce源码解读之Map阶段的数据输入过程整体概览(0)

一、MapReduce中数据流向 二、MapTask并行度 1、原理概览 数据块:Block是HDFS物理上把数据分成一块一块。数据块是HDFS存储数据单位。 数据切片:数据切片只是在逻辑上对输入进行分片,并不会在磁盘上将其切分成片进行存储。数据切片是MapRed…

【Linux】运维-Kubernetes(k8s)应用介绍及使用-了解

一、介绍 Kubernetes,也被称为K8s或Kube,是谷歌推出的业界最受欢迎的容器编排器。 K8s是一个架构良好的分布式系统的例子。它将集群中的所有机器都视为单个资源池的一部分。 K8s与其他成熟的分布式系统一样,有两层:头节点和工作节…

Vue3中子组件挂载问题,父组件修改子组件值的问题

1,首先在父组件导入子组件 挂载 2,传递值给子组件 3,子组件

生成项目结构树-tree

生成项目结构树cmd/bash-tree 在Windows下,你可以使用以下命令行指令来生成一个简单的项目目录树: tree /f这里的/f参数表示显示每个文件夹中的文件。如果你只想看到目录结构,不包括文件,可以使用: tree /f > tr…

Swift 中更现代化的调试日志系统趣谈(一)

概述 昨天凌晨苹果刚刚发布了 WWDC2024 一系列新视频,这标志着苹果开发的一只脚已迈入人工智能(Apple Intelligence)的崭新时代。即便如此,我相信不少秃头码农们还在使用一些“远古简陋”的调试方法来剖析 2142 年的代码。 不过别担心,这一切将在小伙伴们学完本系列博文后…

C语言 RTC时间(年月日时分秒) 和 时间戳 互相转换

一、介绍 在C语言中,将年月日时分秒转换为时间戳(Unix时间戳,即从1970年1月1日00:00:00 UTC到现在的秒数)通常需要使用struct tm结构体和timegm或mktime函数。(注意,mktime函数假设struct tm是本地时间&…

【C语言】青蛙跳台阶问题 - 递归算法(一种思路,针对三种不同的情况)

文章目录 1. 前言2. 题目和分析2.1 代码实现2.2 反思 (重点) 3.题目二(变式)3.1 分析3.2 代码实现 4. 题目三(变式)4.1 分析4.2 代码实现 1. 前言 相信大家看到青蛙跳台阶问题时,第一时间就会想到递归。那你知道为什么…

Scanpy(3)单细胞数据分析常规流程

单细胞数据分析常规流程 面对高效快速的要求上,使用R分析数据越来越困难,转战Python分析,我们通过scanpy官网去学习如何分析单细胞下游常规分析。 数据3k PBMC来自健康的志愿者,可从10x Genomics免费获得。在linux系统上,可以取消注释并运行以下操作来下载和解压缩数据。…

Linux部署mysql8.0.28数据库

目录 1.基础准备 (1)首先去官网下载二进制安装包 (2)下载好之后上传至服务器 (3)禁用关闭selinux和防火墙 (4)挂载光盘搭建本地yum仓库 2.解压到指定目录 3.检查系统是否安装mariadb 4.安装MySQL数据库 (1)进入MySQL目录 看到‘完毕’就说面mysql已经安装成功了 4.初…

【Unity】RPG2D龙城纷争(一)搭建项目、导入框架、前期开发准备

更新日期:2024年6月12日。 项目源码:在第二章发布 免责声明:【RPG2D龙城纷争】使用的图片、音频等所有素材均有可能来自互联网,本专栏所有文章仅做学习和教程目的,不会将任何素材用于任何商业用途。 索引 【系列简介】…

人工智能在肿瘤预后预测中的最新研究进展|顶刊精析·24-06-07

小罗碎碎念 今天要分享的文献主题,大家一定非常熟悉,因为绝大多数AI4cancer的文章都会提到它——预后预测,所以今天的文献主题是——人工智能肿瘤预后预测。 在正式开始分享之前,我想先带着大家梳理两个问题。解决了以下两个问…

上传文件生成聊天机器人,实现客服、办公自动化智能体 | Chatopera

从谈论聊天机器人,到谈论智能体,是目前人工智能最炙手可热的话题,这两年最大的变化是大语言模型的应用。聊天机器人曾经很难定制,往往局限于个别行业,同时也只有行业内的领导者、头部企业能定制。比如银行、金融证券、…

【全开源】旅行吧旅游门票预订系统源码(FastAdmin+ThinkPHP+Uniapp)

🌍旅游门票预订系统:畅游世界,一键预订 一款基于FastAdminThinkPHPUniapp开发的旅游门票预订系统,支持景点门票、导游产品便捷预订、美食打卡、景点分享、旅游笔记分享等综合系统,提供前后台无加密源码,支…

Android开机动画关闭流程

一步一图项目上要加一个开机动画结束的回调,我这边看下如何加 好,老规矩,如何启动动画?动画是谁启动的?怎么关闭的?谁通知关闭的 带着问题看源码 动画的启动流程 开机动画的主入口在哪? 这个…

讯飞星火模型-语音转文字实现

目录 项目结构 准备音频 接口Demo 准备代码(完整修改后) 测试提取中文文字代码 结果 下载链接: 这是上周打算试试,提取视频文字之后,制作视频字幕,从而想用大模型来实现,基本的demo可以在…

WPF音乐播放器 零基础4个小时左右

前言:winfrom转wpf用久的熟手说得最多的是,转回去做winfrom难。。当时不明白。。做一个就知道了。 WPF音乐播放器 入口主程序 FontFamily"Microsoft YaHei" FontSize"12" FontWeight"ExtraLight" 居中显示WindowStartupLocation&quo…

undetected_chromedriver驱动浏览器结束报错OSError: [WinError 6] 句柄无效

undetected_chromedriver驱动浏览器结束报错OSError: [WinError 6] 句柄无效 问题背景 使用undetected_chromedriver包驱动浏览器结束后报错句柄无效 Exception ignored in: <function Chrome.del at 0x000001DD50F07A60> Traceback (most recent call last): File “D:…