vite是什么

vite 是什么

vite ------ 一个由 vue 作者尤雨溪开发的 web 开发工具

Vite由两个主要部分组成

  1. dev server:利用浏览器的ESM能力来提供源文件,具有丰富的内置功能并具有高效的HMR
  2. 生产构建:生产环境利用Rollup来构建代码,提供指令用来优化构建过程

Vite作为一个基于浏览器原生ESM的构建工具,它省略了开发环境的打包过程,利用浏览器去解析imports,在服务端按需编译返回。同时,在开发环境拥有速度快到惊人的模块热更新,且热更新的速度不会随着模块增多而变慢。因此,使用Vite进行开发,至少会比Webpack快10倍左右。

Vite的主要特性

  • Instant Server Start ------ 即时服务启动
  • Lightning Fast HMR ------ 闪电般快速的热更新
  • Rich Features ------ 丰富的功能
  • Optimized Build ------ 经过优化的构建
  • Universal Plugin Interface ------ 通用的Plugin接口
  • Fully Typed APIs ------ 类型齐全的API

为什么要使用Vite

开发环境⚡️速度的提升

经过1.3节,我们简单对比了各打包工具之间的差异。可以看到使用JS开发的工具通常需要很长的时间才能启动开发服务器,且这个启动时间与代码量、代码复杂度正相关。即使使用HMR,文件修改后的效果也要几秒钟才能在浏览器中反应出来,代表如Webpack。那么Vite是如何解决如Webpack这样的构建工具一样,在复杂、多模块项目开发中启动慢、HMR慢的问题呢?

我们详细对比了开发环境中的Vite和Webpack,发现主要有如下不同:

Webpack Vite
先打包生成bundle,再启动开发服务器 先启动开发服务器,利用新一代浏览器的ESM能力,无需打包,直接请求所需模块并实时编译
HMR时需要把改动模块及相关依赖全部编译 HMR时只需让浏览器重新请求该模块,同时利用浏览器的缓存(源码模块协商缓存,依赖模块强缓存)来优化请求
内存高效利用 -

因此,针对开发环境中的启动慢问题,Vite开发环境冷启动无需打包,无需分析模块之间的依赖,同时也无需在启动开发服务器前进行编译,启动时还会使用esbuild来进行预构建。而Webpack 启动后会做一堆事情,经历一条很长的编译打包链条,从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化,最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码,这可满满都是 CPU、IO 操作啊,在 Node 运行时下性能必然是有问题。

针对HMR慢,即使只有很小的改动,Webpack依然需要构建完整的模块依赖图,并根据依赖图来进行转换。而Vite利用了ESM和浏览器缓存技术,更新速度与项目复杂度无关。可以看到,如Snowpack、Vite这类面相非打包的构建工具,在开发环境启动时只需要启动两个Server,一个用于页面加载,一个用于HMR的Websocket。当浏览器发出原生的ESM请求,Server收到请求只需要编译当前文件后返回给浏览器,不需要管理依赖。

使用简单,开箱即用

相比Webpack需要对entry、loader、plugin等进行诸多配置,Vite的使用可谓是相当简单了。只需执行初始化命令,就可以得到一个预设好的开发环境,开箱即获得一堆功能,包括:CSS预处理、html预处理、异步加载、分包、压缩、HMR等。他使用复杂度介于Parcel和Webpack的中间,只是暴露了极少数的配置项和plugin接口,既不会像Parcel一样配置不灵活,又不会像Webpack一样需要了解庞大的loader、plugin生态,灵活适中、复杂度适中。适合前端新手。

相关推荐
小镇程序员2 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 分钟前
前端图像处理(一)
前端
程序猿阿伟12 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒14 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪22 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背25 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M36 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放44 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js