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 …

Java面试题-集合

Java面试题-集合 1、什么是集合?2、集合和数组的区别是什么?3、集合有哪些特点?4、常用的集合类有哪些?5、List, Set, Map三者的区别?6、说说集合框架底层数据结构?7、线程安全的集合…

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、组合全部元素 图片素材网址:

Power BI前端设计:深度探索与实战技巧

Power BI前端设计:深度探索与实战技巧 Power BI作为一款强大的商业智能工具,其前端设计对于用户体验和数据可视化效果至关重要。本文将深入探讨Power BI前端设计的四个关键方面、五个实用技巧、六个设计要素以及七个注意事项,助您提升Power …

学习分享-如何避免 Apache ShardingSphere 中的笛卡尔积现象

前言 Apache ShardingSphere 是一个开源的分布式数据库中间件,旨在通过数据分片、分布式事务、分布式治理等技术,提升数据库系统的性能和可扩展性。然而,最近在使用 ShardingSphere 进行分库分表并多表查询时,出现了笛卡尔积现象…

Spark Streaming 概述及入门案例

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

在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ

在Red Hat Enterprise Linux 9上快速安装和部署RocketMQ可以按照以下步骤进行: 1. 安装Docker 首先,确保Docker已经安装在你的系统上。 更新系统包并安装依赖项: sudo yum update -y sudo yum install -y yum-utils device-mapper-persiste…

2024年5月份面试总结

2024年5月份找工作/面试总结: 本人前段时间写了刚过完年后的一个月内找工作的情况,请查看https://blog.csdn.net/zgaoq/article/details/136236788?spm1001.2014.3001.5501 但是后续写的总结被和谐了,不知道这篇文章能不能发出来。 1、5月份…

系统架构设计师【第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架构的实…

数据库的换行符到前端不展示了

是这样的原本数据库中的数据都是带有\n换行符的但是页面却一直不展示 解决办法 <el-drawer title"预览" :visible.sync"drawer" :with-header"false"><div v-for"(item, index) in cardArray" :key"index"><…

如何将 Vue 应用程序部署到 Cloudflare Pages

在现代 Web 开发中&#xff0c;Vue.js 已经成为了一个非常受欢迎的前端框架。它的简洁、高效和灵活性使得开发人员可以轻松构建出色的用户界面和交互体验。而 Cloudflare Pages 提供了一个简单而强大的方式来托管和部署静态网站和应用程序。本文将介绍如何将 Vue 应用程序部署到…

Android常见内存泄漏场景总结

一、非静态内部类造成的内存泄漏 造成原因&#xff1a;非静态内部类默认会持有外部类的引用&#xff0c;如果内部类的生命周期超过了外部类就会造成内存泄漏。 场景&#xff1a;当Activity销毁后&#xff0c;由于内部类中存在异步耗时任务还在执行&#xff0c;导致Activity实…

[补题记录]Leetcode 3.无重复字符的最长子串

传送门&#xff1a;无重复字符的最长子串 Problem/题意 给一个由英文、数字、符号、空格组成的字符串&#xff0c;找出其中不含有重复字符的最长子串的长度。 比如&#xff1a;abb 包含了重复字符 b&#xff1b;abc 没有包含重复字符。 注意是子串&#xff0c;不是子序列。 …

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

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