Vite和Vue3:Vite是一种新的开发服务器和构建工具,它利用了现代浏览器支持的原生ES模块导入,为开发者提供了极速的冷启动和即时热更新

I. Vite 的概述

Vite的定义和功能

 

Vite 是一个由 Vue.js 的作者开发的现代前端构建工具,目标是提供一种尽可能快的现代开发体验。"Vite" 在法语中意思是 "快",这也正是其设计的目标之一。

 

Vite 的功能主要包括:

 
  1. 开发服务器:使用原生的 ES modules 搭建了一个开发服务器,使得开发环境中依赖包的导入变得更加轻巧快速。

  2. 构建:Vite 利用 Rollup 打包你的代码,赋予你预构建依赖、按需编译等能力,它可以生成带有更少 JavaScript 和有效的按需加载的最终静态资源。

  3. HMR:Vite 提供了对模块热替换 (HMR) 的开箱即用支持。

  4. CSS 预处理:无需特殊配置即可支持 SCSS、Less 和 Stylus 等 CSS 预处理器。

 

Vite的主要特点和优势

 

主要有以下几点:

 
  1. 快速冷启动:传统的前端开发工具(如 webpack)需要在服务器启动时,对整个应用进行构建或预编译。而 Vite 利用原生 ES module 的通信能力,无需进行预编译或者构建即可启动开发服务器。

  2. 按需编译:在开发时,Vite 可以在请求时即时编译单个文件,无需提前对整个应用进行编译。

  3. 模块热替换:其 HMR 性能远超传统构建工具,修改单个文件即可热替换,无需刷新整个页面就能看到更新。

  4. 支持 TypeScript、JSX、CSS Modules 和 PostCSS 等现代前端技术。

II. Vite 的工作原理

原生 ESModule

 

ESModule 即 ECMAScript Module,是 JavaScript 本身对模块化的定义和实现。原生 ESModule 的支持使得代码可以在浏览器端直接运行,不需要额外的打包和编译,而只需要浏览器解析模块导入语句。

 

在 Vite 中,当源码被浏览器请求时,Vite 会自动相应模块请求并转换为传统的 CommonJS 或 UMD 格式,然后发送到浏览器端,这使得各模块的导入与加载更加缓和。

 

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

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

相关文章

Stable Diffusion 插件安装与推荐,助力你的AI绘图

在上一篇文章我们安装了Stable Diffusion ,这篇文章我们来安装Stable Diffusion的插件 Stable Diffusion的插件是绘画中重要的一环,好的插件可以让你的绘画更加得心应手 中英双语插件 为什么要安装中英双语插件呢,不能只安装中文插件吗&…

安卓应用开发学习:获取导航卫星信息

一、引言 我昨天写了《安卓应用开发学习:获取经纬度及地理位置描述信息》日志,今天再接再厉,记录一下跟着《Android App 开发进阶与项目实战》一书,实现获取导航卫星信息,并在手机上显示的功能的情况。先上实现后的在…

Redis的持久化方式和注意点

redis持久篇 两种持久化技术: AOF日志和RDB快照 Redis默认会开启RBD快照 AOF:持久化只会记录写操作命令。 是一种日志,写入到文件,有相应的格式文本 就是 Redis 里的AOF(Append Only File)持久化功能,注意只会记录写操作命令…

决定马萨诸塞州版图的关键历史事件

决定马萨诸塞州版图的关键历史事件: 1. 早期探索与*民定居:17世纪初,英国清教徒为寻求宗教自由,乘坐“五月花号”到达新大陆,并于1620年在现在的普利茅斯建立了第一个永久性英国*民地。随后,更多的英国*民…

LKD-Net: Large Kernel Convolution Network for Single Image Dehazing

LKD-Net:用于单幅图像去噪的大型核卷积网络 摘要 基于深度卷积神经网络(CNN)的单幅图像去噪方法已经取得了很大的成功。以往的方法致力于通过增加网络的深度和宽度来提高网络的性能。目前的方法侧重于增加卷积核的大小,以受益于更大的接受野来增强其性能…

昇思25天学习打卡营第1天|新手上路

这里写自定义目录标题 打卡昇思MindSpore扫盲快速入门 打卡 昇思MindSpore扫盲 第一节基本是一个mindspore的科普扫盲。大概介绍一通mindspore的一些架构,feature,以及其对比于其他同类框架的优势。简单扫读了一遍大概有点印象直接跳过。 快速入门 这…

Vue 3 中处理文件上传和响应式更新

Vue 3 中处理文件上传和响应式更新 一、前言1.创建文件上传组件2.解释代码3.在主应用中使用文件上传组件4.总结 一、前言 在现代 web 开发中,文件上传是一个常见需求。本文将详细介绍如何在 Vue 3 中处理文件上传,并确保上传后的文件列表能够响应式更新…

Linux内核编译流程

删除之前编译生成的文件和配置文件 make mrproper生成.config文件 make menuconfig编译 make -j41. No rule to make target ‘debian/canonical-certs.pem‘, needed by ‘certs/x509_certificate_list‘ vim .config 修改CONFIG_SYSTEM_TRUSTED_KEYS为"" 修改C…

理解异步复位,同步释放 ?

在数字电路设计中,复位信号用于初始化系统,使其进入一个已知的状态。复位信号可以是异步的,即不依赖于时钟信号,这种设计方法称为异步复位。然而,为了确保系统在复位解除后能够正确同步和稳定工作,常采用同…

如何把图片转换成pdf格式?图片转PDF方法分享

如何把图片转换成pdf格式?图片转换为PDF格式的重要性不言而喻。PDF文件不仅能够在各种操作系统和设备上保持一致的显示效果,还能确保图片内容的清晰度和质量不受损害。此外,PDF格式支持加密和权限设置,可以保护图片内容不被轻易篡…

FireFox 编译指南2024 Windows10篇-环境准备(一)

1. 引言 在开源浏览器项目中,Firefox因其高性能和灵活性而备受开发者青睐。为了在本地环境中编译和定制Firefox,开发者需要做好充分的环境准备工作。这不仅是编译成功的基础,也是后续调试、优化和二次开发的关键步骤。 编译Firefox是一个复…

深入剖析Tomcat(十二) 详解StandardContext

StandardContext是Context容器的一个标准实现,一般情况下,Tomcat都是使用StandardContext类来创建Context容器。前面讲过,Context容器代表了一个Web应用,Tomcat本身支持部署多个应用,相应的每个应用都会有一个Standard…

C语言 输入输出使用

一、getchar putchar puts #include "stdio.h" /* 跟printf的区别 1.自动加入换行符 2.printf支持多种输出,而puts就是输出字符串 */ int main(){char c;puts("请输入一个字符");cgetchar();puts("你输入的字符是");putchar(c);ret…

实用软件下载:ABBYY Finereader 15最新安装包及详细安装教程

数据表明FineReader PDF提供实用、简易的工具,将纸质文档和PDF结合起来,提高了数字工作场所的效率。我们都知道 即时背景识别:使不可搜索的PDF能够在工作中立即使用。值得一提的是文档转换更精准:OCR技术,它提高了PDF转换、布局保…

基于STM32的简易计算器proteus仿真设计(仿真+程序+设计报告+讲解视频)

基于STM32的简易计算器proteus仿真设计 讲解视频1.主要功能2. 仿真3. 程序4. 设计报告5. 资料清单&下载链接 基于STM32的简易计算器proteus仿真设计(仿真程序设计报告讲解视频) 仿真图proteus 8.9 程序编译器:keil 5 编程语言:C语言 …

c语言输出文字颜色

c语言输出文字颜色 在C语言中,输出文字颜色主要是依赖于你的终端或者是你所使用的编译器是否支持这种操作。在Windows的命令提示符(cmd)中,可以使用ASCII控制码来改变文字颜色,但在Linux或Mac的终端中,通常…

深入JVM:详解JIT即时编译器

文章目录 深入JVM:详解JIT即时编译器一、序言二、基础概念1、何为JIT即时编译2、热点代码 三、HotSpot内置的即时编译器1、C1编译器2、C2编译器3、分层编译3.1 协作流程 四、常见JIT优化技术1、方法内联2、逃逸分析(1)同步锁消除(…

数据结构:栈和队列详解

栈 栈的概念 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守先进后出LIFO(Last In First Out)的原则。大家可以理解为…

3-自动驾驶车辆路径规划

在自动驾驶领域,轨迹搜索(Trajectory Searching)和轨迹生成(Trajectory Generation)是两个密切相关但有所不同的概念,它们都是自动驾驶车辆规划其行驶路径的关键步骤。 轨迹搜索(Trajectory Se…

Day60 代码随想录打卡|回溯算法篇---组合

题目(leecode T77): 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 方法:本题最直观的解法是使用暴力for循环遍历法,根据k的大小定for循环的嵌套次数&…