洞察：Vite构建工具详解

回复

V这个单词是一个语法单词，意思是轻。它和我们使用-的作用基本相同，都是项目初始构建工具，相当于V项目构建的第二代产品，当然它也包含了项目编译功能。需要注意一下V的生产环境下打包是通过R来完成的。目前还属于版本，还不是正式版本，且对只支持3的项目，不支持2的项目。

比较初是配V30一起使用的，后来适配了各种前端项目，目前提供了V、R、P框架模板

目前来说，V使用的是-脚手架，R一般使用--脚手架。虽然脚手架工具不一样，但是内部的打包工具都是W

为什么要开发一个全新的构建工具，是W不香了吗

V方式构建的项目，和使用W构建的项目，有什么不同

一个新工具的出现，一定是为了解决现有工具存在的问题的，否则新工具就没有存在的价值和意义

――一个由作者尤雨溪开发的开发工具，它具有以下特点：

速的冷启动

即时的模块热更新

真正的按需编译

从作者在微博上的发言：

V，一个基于浏览器原生ES的开发服务器。利用浏览器去解析，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有V文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题

中可以看出主要特点是基于浏览器的ES来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可

基于浏览器ES来开发应用也不是什么新鲜事，也基于此，不过目前此项目社区中并没有流行起来，的出现也许会让这种开发方式再火一阵子

有趣的是算是革了的命了（生产环境用）

的使用方式
速通道

同常见的开发工具一样，提供了用或者一建生成项目结构的方式，使用在终端执行

$--
$-
$
$
即可初始化一个项目（默认应用模板为3），生成的项目结构十分简洁

|_____
|____A应用入口
|____页面入口
|____配置文件
|____
执行即可启动应用

V解决了W哪些问题
随着项目的复杂度升级，代码规范和管理就必须要同步提升。于是，编程社区中提出了多种模块化规范，服务端选择了CJS规范，客户端选择AMD规范较多，但是，两种模块化规范也都存在一定的问题，都是JS编程，有两个不同的模块化规范，在JS语言层面还是不够的，终于在ES6中，ECMA会推出了语言层面模块系统：ESM规范

模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题，但是随着模块化思想的引入，我们的前端应用又会产生了一些新的问题，比如：

首先，我们所使用的ESM模块系统本身就存在环境兼容问题。尽管现如今主流浏览器的比较新版本都支持这一特性，但是目前还法保证用户的浏览器使用情况。所以我们还需要解决兼容问题

其次，模块化的方式划分出来的模块文件过多，而前端应用又运行在浏览器中，每一个文件都需要单独从服务器请求回来。零散的模块文件必然会导致浏览器的频繁发送络请求，影响应用的工作效率

比较后，谈一下在现JS模块化的基础上的发散。随着应用日益复杂，在前端应用开发过程中不仅仅只有JS代码需要模块化，HTML和CSS这些资源文件也会面临需要被模块化的问题。而且从宏观角度来看，这些文件也都应该看作前端应用中的一个模块，只不过这些模块的种类和用途跟JS不同

对于开发过程而言，模块化肯定是必要的，所以我们需要在前面所说的模块化现的基础之上引入更好的方案或者工具，去解决上面提出的3个问题，让我们的应用在开发阶段继续享受模块化带来的势，又不必担心模块化对生产环境所产生的影响

本质上，是一个现代JS应用程序的静态模块打包器（）

V脚手架工具-使用进行打包，开发时可以启动本地开发服务器，时预览。因为需要对整个项目文件进行打包，开发服务器启动缓慢

而对于开发时文件修改后的热更新HMR也存在同样的问题

W的热更新会以当前修改的文件为入口重新打包，所有涉及到的依赖也都会被重新加载一次

V则很好地解决了上面的两个问题

打包问题
只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，现真正的按需加载

热更新问题
采用立即编译当前修改文件的办法。同时还会使用缓存机制(缓存=内置缓存)，加载更新后的文件内容

所以，具有了速冷启动、按需编译、模块热更新等良特质

综上所述，构建项目与-构建的项目在开发模式下还是有比较大的区别：

V在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则；V-CLI开发模式下必须对项目打包才可以运行

V基于缓存的热更新，V-CLI基于W的热更新

启动链路
命令解析
这部分代码在里，主要内容是借助――一个轻量级的命令解析工具解析，解析的函数是O，精简后的代码片段如下

O(){
可以是
(_[0]){
=_[0]
}

}
拿到后，会根据的值判断是执行在开发环境需要的S命令或生产环境需要的B命令

(!||===''){
S()
}(===''){
B()
}(===''){
O()
}
在S方法中，执行模块的创建开发服务器方法，同样在B中执行模块的构建方法

这部分代码在里，主要暴露一个S方法

使用作，使用创建了一个监听文件改动的，同时现了一个插件机制，将-和以及其他必要工具组成一个对象注入到每个中

组成如下

依次从里获取上面这些组成部分，有的在例添加了几个，有的借助现对文件的改动监听，这种插件机制带来的好处是整个应用结构清晰，同时每个插件处理不同的事情，职责更分明

大致分类如下

用户注入的――自定义

P――处理

RP――重写内的内容

RP――重写模块中的导入

RP――获取模块内容

P――处理单文件组件

P――使用处理资源

PP――处理静态资源

SP――托管静态资源

P――处理等引用

接下来看看的现方式，开发一个用来拦截文件可以这么现

SPC{
:
:K
:S
:HMRW
:IR
:SC
}

SP=（:SPC）=;

JIP:SP=({})={
((,)={
()
(W('')){
=''
=``
}
})
}
背后的原理都在里，有兴趣可以每一个都了解一下

这部分代码在中，目录的结构虽然与相似，同样导出一个方法，同样也有许多，不过这些与中的用途不一样，因为使用了，所以这些也是为打包的

结语：V原理下期再见

在人们的关注下幸运大转盘抽奖源码终于成长为人们所需求的那样，为市场而生，为需求而来。https://www.uihtm.com/jquery/10591.htmlHTML源码网(www.uihtm.com)提供div+css3响应式模板包括：网页模板、企业模板、商城模板，以及h5网站,jQuery网页特效,wp主题等8000G源码免费模板下载。