Vite 介绍

已于 2022-12-09 14:33:18 修改
阅读量1.4k 收藏 1
点赞数
分类专栏： vue3 文章标签： 前端 typescript javascript vue.js 开发语言
于 2022-12-09 12:34:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41005300/article/details/128250773
版权
Vite是一款由Vue作者尤雨溪开发的新型前端构建工具，它在开发阶段提供快速启动、模块热替换和对Vue等框架的良好支持。Vite在构建阶段则通过预构建和NPM依赖解析优化了流程，同时支持TypeScript、CSS处理和多种资源导入方式，如JSON、Glob、动态导入和WebAssembly。
摘要由CSDN通过智能技术生成

目录

一、Vite是什么？

二、Vite在开发阶段

index入口与vite处理方式

Vite作为一个服务器 

三、Vite在构建阶段

NPM 依赖解析和预构建

模块热替换 

TypeScript 

客户端类型 

Vue

CSS

静态资源处理 

JSON 

Glob 导入 

动态导入 

WebAssembly 

一、Vite是什么？

vite是前端开发与构建工具

二、Vite在开发阶段

index入口与vite处理方式

  • Vite 将 index.html 视为源码和模块图的一部分。
  • Vite 解析引入type="module" 的script标签。
  • Vite解析内联引入类型为type="module"的JavaScript标签。
  • Vite解析引用 CSS 的link标签。
  • Vite将index.html中的URL自动转换。

Vite作为一个服务器 

  • Vite根目录即以当前工作目录作为根目录启动开发服务器
  • Vite能够处理依赖管理，解析根目录之外位置的文件。

三、Vite在构建阶段

Vite 通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。

NPM 依赖解析和预构建

  • 预构建，esbuild
  • 重新导入URL，避免浏览器引用执行错误。
  • Vite 通过 HTTP 头来缓存请求得到的依赖。

模块热替换 

Vite 提供了一套原生 ESM 的 

最低0.47元/天 解锁文章
王里想国
关注
专栏目录
vite详解
zyf971020的博客
09-28 1424
vite详解
vite简介
qq_39750019的博客
07-14 245
vite 是一个http服务器，特殊的地方： 可以在单文件中书写ES6语法 支持 热更新（请求的内容才会被打包/更新） Rollup打包
vite使用简介
最新发布
alankuo的专栏
08-13 176
在项目的配置文件（如 vite.config.js ）中，您可以进行一些自定义的配置，例如设置别名、处理 CSS 预处理器、配置插件等。2. 高效的热模块更新（HMR）：修改代码后能够实现快速的局部更新，提供流畅的开发体验。您可以通过安装相应的预处理器依赖，并在 Vite 的配置文件中进行适当的配置来使用它们。Vite 是一个新型的前端构建工具，具有快速的开发启动速度和高效的构建性能。3. 简洁的配置：相较于传统的构建工具，Vite 的配置相对简单和直观。
Vite简介
young的博客
09-07 4581
vite的介绍
web开发构建工具Vite
qq_48018288的博客
10-18 2098
web开发构建工具Vite
Vite介绍及实现原理
King的博客
10-23 1453
Vite是一种新型的前端构建工具，它能显著改善前端开发体验。Vite由两个主要部分组成：一个开发服务器，它基于 原生 ES 模块(ESM)，提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMRESM：ESM是浏览器支持的一种模块化方案，允许在浏览器实现模块化。ES6之前，JS一直没有自己的模块体系。但是ES6引入了ESM，到此，JS终于有了自己的模块体系。HMR。
对vite的简单了解
汉堡请不要欺负面条
09-07 7628
vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成： 一个开发服务器：它基于原生的es模块，提供了丰富的内建功能，如速度快到惊人的模块热更新HMR. 一套构建指令：使用Rollup打包代码，并且它是预构建的，可输出用于生产环境的高度优化过的静态资源。 vite旨在提供开箱即用的配置，但同时它也提供插件API和JavaSccript API 带来高度的可扩展性并且有完整的类型支持。
Vite分享、原理介绍ppt
11-15
Vite是一种创新的前端构建工具，它以提升前端开发体验为目标。Vite的核心特性包括一个基于原生ES模块的快速开发服务器，支持高效的模块热更新（HMR）。它由两个主要部分组成：一个开发服务器和一套预配置的Rollup...
vite搭建three.js的开发环境
01-06
本篇文章将详细介绍如何使用Vite搭建一个Three.js的开发环境。 首先，我们需要确保我们的系统已经安装了Node.js，因为Vite是基于Node.js运行的。如果尚未安装，可以访问https://nodejs.org/ 下载并安装适合你操作...
vue3+vite 组件打包
04-16
- **README.md**：项目说明文档，通常包含项目介绍、安装指南、使用方法等内容。 - **node_modules**：项目依赖的npm包存放的地方。 - **.vscode**：VS Code编辑器的工作区配置，包含代码格式化、调试等设置。 - **...
vite是什么？
qq_43651168的博客
05-22 1464
与传统的打包工具不同，Vite在开发环境中不需要将所有的代码打包成一个或多个bundle，而是根据需要即时编译并按需提供模块，这使得启动时间更快，并且在开发过程中的热重载也更加快速和准确。总结起来，Vite是一种基于ES模块的开发服务器和构建工具，旨在提供更快的开发体验。热重载：在开发过程中，Vite还支持热模块替换（HMR），使您可以在不刷新整个页面的情况下实时查看和应用代码的更改。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
什么是vite 以及为什么要使用vite(即vite的优点)？
qq_69282350的博客
11-17 6245
vite 初了解
Vite介绍
qq_40055200的博客
05-13 565
尤大大在开发vue3.0时用的是原生的es-modules的构建工具（vite） Vite--跨前端框架的能力，及其优越的性能（下一代前端构建的打包工具） 新项目中投入使用vite构建工具 webpack转载到vite的小伙伴 充实自己，开拓创建 vite的组成：一个开发服务器；一套构建指令 为什么选择vite,比webpack强在哪里 解析：在浏览器支持ES模块之前，JS并没有提供原生的机制，让我们开发者以模块的方式进行开发，这也正是我们对打包这个体系概念熟悉的原因。 打包的工作具体就是
vite特点
yangyanqin2545的博客
12-28 763
vite特点 1、vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块加载规则； 2、vue-cli开发模式下必须对项目打包才可以运行； 3、vite基于缓存的热更新； 4、vue-cli基于webpack的热更新； 总结：快速启动、按需编译、模块热更新； ...
Vite是什么?
MAMAsomers的博客
02-20 3626
Vite是什么 Vite (法语单词“ fast”，发音为/vit/)是一种新型的前端构建工具，它可以显著改善前端的开发体验。它由两个主要部分组成: 一个通过本机 ES 模块提供源文件的开发服务器，具有丰富的内置特性和快得惊人的热模块替换(HMR)。 一个构建命令，它将代码与 Rollup 捆绑在一起，后者预先配置为输出用于生产的高度优化的静态资产 此外，Vite 通过其插件 API 和 JavaScript API 具有高度的扩展性，并提供全面的类型支持 有多快？ 为了了解 Vite 的速度有多快，这里有
什么是 Vite
热门推荐
qq_42941302的博客
04-19 1万+
Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？ 这里引用一下 vite 官网首页的描述：下一代前端开发与构建工具 为什么是下一代呢？ 现有的前端构建工具不够我们用吗？ Vite 是不是在重复造轮子？ 下面我就用简单的逻辑解释一下 Vite 的优越性。 为什么是下一代 为了解释“下一
学习二十四、Vite 简介
qq_40289624的博客
12-15 753
Vite Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具 它基于 ECMAScript 标准原生模块系统 (ES Modules) 实现 项目依赖 Vite @vue/compiler-sfc ES Module 现代浏览器都支持 ES Module (IE 不支持) 通过下面的方式加载模块 支持模块的 script 默认延迟加载 类似于 script 标签设置 defer 在文档解析完成后，触发 DOMContentLoaded 事件前执行
Vite是什么？怎样使用Vite创建Vue3项目？【详细教程】
zy1992As的博客
10-06 4085
Vite(读音：/vit/)是一个轻量级、运行速度快的前端构建工具，它支持模块热替换(Hot Module Replacement，HMR)，可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。
前端 Vite 详细介绍
06-12
前端Vite是一个基于ESM（ES Modules）的构建工具，旨在提供快速的开发服务器和构建工具，以加快前端应用的构建速度。它由Vue.js的作者尤雨溪开发，原本是Vue.js 3.0的开发工具，在发布后得到了广泛的关注和应用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王里想国

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值