vite介绍

news2024/12/23 9:18:45

vite
vite是一种新的前端构建工具,vite借助了浏览器对ESM的支持,采用和传统webpack打包完全不一致的unbundle打包机制;
vite的快主要体现在两个方面,快速的冷启动和快速的热更新

快速的冷启动:vite只需启动一台静态页面的服务器, 不需要打包项目全部文件, 服务器根据客户端的请求加载不同的模块处理, 实现按需加载, 而webpack则是一开始就将整个项目打包一遍,再开启dev-server,如果项目规模庞大, 打包时间必定很长。
打包编译速度:当需要打包到生产环境时, vite使用传统的rollup进行打包, 所以vite的优势是体现在开发阶段。
热模块更新:当某个模块内容改变时, 让浏览器重新请求改模块即可, 而不是像webpack那样重新将该模块的所有依赖重新编译。

vite的优点(unbundle机制的核心)
模块之间的依赖关系由浏览器解析 文件的转换由dev server 的middleware实现并做缓存 不对源文件做合并捆绑操作

vite的缺点
由于unbundle机制, 首屏期间懒加载方面需要额外做一下工作:和webpack相比, vite把需要在dev server启动过程中完成的工作转移到dev server 响应浏览器的请求过程中,不可避免的造成首屏加载性能下降。不过首屏性能差只发生在dev server 启动后第一次加载页面的时候, 之后再重新加载页面时, 性能会好很多, 原因是dev server会将之前已经完成转换的内容缓存下来。不对文件做捆绑操作, 导致大量的HTTP请求 初次加载阻塞首屏请求

使用vite创建项目
之前使用vue-cli脚手架时, 需要先把vue-cli安装在全局中, 以便后面创建项目使用, 而vite构建工具是不需要全局安装的, 可以通过下面的命令进行创建;注意vite需要的node版本14.18+, 有些模块的依赖需要更高的node.js版本。
创建项目的命令

vue create vite@latest

然后输入文件名, 选择框架,选择语言
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
另一种创建方式,可以选择创建router文件

npm init vue@latest

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

如何将Express项目部署到Vercel

什么是Vercel? 想必好多前端同学都知道Vercel吧!如果还不了解的同学也没关系,好好看这篇文章,认识认识Vercel,我想对你部署项目有一定帮助。 Vercel 是一个云平台,用于托管和部署静态网站、前端应用程序以…

2023年无形资产评估研究报告

第一章 无形资产概况 1.1 定义 无形资产是一种缺乏物质实体的资产。例如,专利、版权、特许权、商誉、商标和商号,以及软件等。这与物质资产(如机器、建筑等)和金融资产(如政府证券等)形成了对比。无形资产…

Mybatis 动态SQL – 使用choose标签动态生成条件语句

之前我们介绍了if,where标签的使用;本篇我们需要在if,where标签的基础上介绍如何使用Mybatis提供的choose标签动态生成条件语句。 如果您对if,where标签动态生成条件语句不太了解,建议您先进行了解后再阅读本篇,可以参考: Mybat…

将序数与比特币智能合约集成:第 1 部分

将序数与比特币智能合约集成:第 1 部分 最近,比特币序数在区块链领域引起了广泛关注。 据称,与以太坊 ERC-721 等其他代币标准相比,Ordinals 的一个主要缺点是缺乏对智能合约的支持。 我们展示了如何向 Ordinals 添加智能合约功…

插入排序,选择排序,交换排序,归并排序和非比较排序(C语言版)

前言 所谓排序,就是将一组数据按照递增或者递减的方式进行排列,让这组数据变得有序起来。排序在生活中运用的是十分广泛的,各行各业都用到了排序,比如我们在网购的时候就是按照某种排序的方式来选择东西的。所以去了解排序的实现也…

vue 使用qrcode生成二维码并可下载保存

安装qrcode npm install qrcode --save代码 <template><div style"display: flex; flex-direction: column; align-items: center; justify-content center;"><div>查看溯源码&#xff0c;<a id"saveLink" style"text-decorati…

Ae 效果:CC Glue Gun

生成/CC Glue Gun Generate/CC Glue Gun CC Glue Gun&#xff08;CC 胶水枪&#xff09;可以用于生成仿佛由胶水枪绘制的线条或图案&#xff0c;它模拟了胶水枪绘制在不同表面上的纹理和反光效果。 CC Glue Gun 效果实质上是通过设置画笔笔触的位置来构成画笔描边路径&#xff…

ModaHub魔搭社区专访百度智能云李莅:向量数据库市场会不会更卷?

ModaHub魔搭社区:在当今的信息化时代,数据库技术已经渗透到了我们生活的各个角落。传统的关系型数据库在市场上的竞争已经非常激烈,据统计,市面上有数百种不同类型的数据库产品在竞争。那么,在未来,随着人工智能和大数据技术的发展,向量数据库市场会否也会陷入同样的激烈…

js中如何判断一个变量的数据类型?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐typeof 运算符⭐instanceof 运算符⭐Object.prototype.toString 方法⭐Array.isArray 方法⭐自定义类型检查⭐null 和 undefined 检查⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订…

ClickHouse进阶(七):Clickhouse数据查询-1

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

RK3568-i2c-适配8010rtc时钟芯片

硬件连接 从硬件原理图中可以看出&#xff0c;rtc时钟芯片挂载在i2c3总线上&#xff0c;设备地址需要查看芯片数据手册。编写设备树 &i2c3 {status "okay";rx8010: rx801032 {compatible "epson,rx8010";reg <0x32>;}; };使能驱动 /kernel/…

NPM 常用命令(三)

目录 1、npm compltion 1.1 描述 2、npm config 2.1 常用命令 2.2 描述 set get list delete edit fix 2.3 配置 json global editor location long 3、npm dedupe 3.1 描述 3.2 配置 4、npm deprecate 4.1 命令使用 4.2 描述 4.3 配置 registry ot…

【huggingface】数据集及模型下载并保存至本地

目录 数据集ChnSentiCorppeoples_daily_ner 模型bert-base-chinesehfl/rbt3t5-baseopus-mt-zh-enChinese_Chat_T5_Base 环境&#xff1a;没有代理&#xff0c;无法访问部分国外网络 数据集 正常情况下通过load_dataset加载数据集&#xff1b;save_to_disk保存至本地&#xff1b…

佳作导读 | 《C++ Core Guidelines》

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 佳作导读 | 《C Core Guidelines》 《C Core Guidelines》由Bjarne Stroustrup和Herb Sutter等共同编写关于使用C编程语言的指南&#xff1b;旨在提供关于如何使用C进…

Linux常用命令——csplit命令

在线Linux命令查询工具 csplit 将一个大文件分割成小的碎片文件 补充说明 csplit命令用于将一个大文件分割成小的碎片&#xff0c;并且将分割后的每个碎片保存成一个文件。碎片文件的命名类似“xx00”&#xff0c;“xx01”。csplit命令是split的一个变体&#xff0c;split只…

如何在Win10系统上安装WSL(适用于 Linux 的 Windows 子系统)

诸神缄默不语-个人CSDN博文目录 本文介绍的方法不是唯一的安装方案&#xff0c;但在我的系统上可用。 文章目录 1. 视频版2. 文字版和代码3. 本文撰写过程中使用到的其他网络参考资料 1. 视频版 B站版&#xff1a;在Windows上安装Linux (WSL, 适用于 Linux 的 Windows 子系统…

【Rust 日报】2023-09-03 sudo-rs:sudo 和 su 的内存安全实现

sudo-rs&#xff1a;sudo 和 su 的内存安全实现 sudo-rs 项目通过以下方式改进了原始 sudo 的安全性&#xff1a; 使用内存安全语言&#xff08;Rust&#xff09;&#xff0c;因为估计原始 sudo 中三分之一的安全漏洞都与内存管理问题有关。省略不常用的功能&#xff0c;以减少…

记2个library cache lock故障case

第一个case 客户说晚上10点的时候做业务很卡&#xff0c;遂取对应时段awr 非常明显的library cache lock事件。这个事件是元数据锁&#xff0c;一旦泛滥对数据库的影响范围很大。 因此&#xff0c;他的泛滥第一时间应该想到会有大量持有元数据的动作。对sql进行检查 这个自动…

精益制造、质量管控,盛虹百世慧共同启动MOM(制造运营管理)

百世慧科技依托在电池智能制造行业中的丰富经验&#xff0c;与盛虹动能达成合作&#xff0c;为其提供MOM制造运营管理平台&#xff0c;并以此为起点&#xff0c;全面提升盛虹动能的制造管理水平与运营体系。 行业困境 中国动力电池已然发展为全球最大的电池产业&#xff0c;但…

【网络安全带你练爬虫-100练】第20练:数据处理-并写入到指定文档位置

目录 一、目标1&#xff1a;解码去标签 二、目标2&#xff1a;提取标签内内容 三、目标3&#xff1a;处理后的数据插入原位置 四、目标4&#xff1a;将指定的内容插入指定的位置 五、目标5&#xff1a;设置上下文字体格式 六、目标6&#xff1a;向多个不同位置插入不同的…