西安市建网站找哪家,中国纪检监察报网站,嘉兴网站制作星讯网络科技,wordpress表单上传多个文件vite 是什么
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具
Vite由两个主要部分组成
dev server#xff1a;利用浏览器的ESM能力来提供源文件#xff0c;具有丰富的内置功能并具有高效的HMR生产构建#xff1a;生产环境利用Rollup来构建代码#xff0c;提供指令用…vite 是什么
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具
Vite由两个主要部分组成
dev server利用浏览器的ESM能力来提供源文件具有丰富的内置功能并具有高效的HMR生产构建生产环境利用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发现主要有如下不同
WebpackVite先打包生成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生态灵活适中、复杂度适中。适合前端新手。
