作者:empty 页数:86 出版社:empty |
Vite(法语意为 快速的 , 发音/v it) 是一种新型前端构建工具, 能够显著提升前端开发体验,它主要由两部分组成:一个开发服务器,它基于原生ES模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HM...
在浏览器支持ES模块之前, 开发者没有以模块化的方式开发JavaScript的原生机制, 这也是“打包”这个概念出现的原因:使用工具抓取、处理和链接我们的源码模块到文件中,使其可以运行在浏览器中,时过境迁, 我们见证了许多诸如web pack、Rollup和Parcel等工具的诞生, 这些工具极大地改善了前端开发者的开发体验。然而, 当我们开始构建越来越大型的应用时, 需要处理的JavaScript代码量也呈指数级增长, 大型项目包含数千个模块的情况并不少见, 我们开始遇到性能瓶颈一使用JavaScript开发的工具通常需要很长时间(甚至是几分钟!) 才能启动开发服务器, 即使使用HMR, 文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。Vite旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持ES模块, 越来越多JavaScript工具使用编译型语言编写,缓慢的服务器启动当冷启动开发服务器时,基于打包器的方式启动必须先去急切地抓取和构建你的整个应用,然后再提供服务。Vite通过在一开始将应用中的模块区分为依赖和源码两类, 改进了开发服务器启动时间.·依赖大多为纯JavaScript并在开发时不会变动。一些较大的依赖(例如有上百个模块的组件库) 处理的代价也很高。依赖也通常会以某些方式(例如ESM或者Common JS) 被拆分到大量小模块中。Bundle based dev serverNative ESM based dev serverVite将会使用es build预构建依赖。Es build使用Go编写, 并且比以JavaScript编写的打包器预构建依賴快10-108倍。·源码通常包含一些并非直接是JavaScript的文件, 需要转换(例如JSX, CSS或者Vue/Svelte组件),时常会被编辑。同时,并不是所有的源码都需要同时被加载,(例如基于路由拆分的代码模块)。Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作:Vite只需要在浏览器请求源码时进行转换并技需提供源码。根据情景动态导入的代码,即只在当前屏幕上实际使用时才会被处理。本文档使用书栈网·BookStack.CN构建缓慢的更新当基于打包器启动时,编辑文件后将重新构建文件本身,显然我们不应该重新构建整个包,因为这样更新速度会随着应用体积增长而直线下降,一些打包器的开发服务器将构建内容存人内存,这样它们只需要在文件更改时使模块图的一部分失活[1],但它也仍需要整个重新构建并重载页面,这样代价很高,并且重新加载页面会消除应用的当前状态,所以打包器支持了动态模块热重载(HHR) :允许一个模块“热替换”它自己, 而对页面其余部分没有影响。这大大改进了开发体验-然而,
在实践中我们发现, 即使是HMR更新速度也会陆着应用规模的增长而显著下降。在Vite中, HMR是在原生ESM上执行的。当编辑一个文件时, Vite只需要精确地使已编辑的模块与其最近的HMR边界之间的链失效(大多数时候只需要模块本身) , 使HMR更新始终快速, 无论应用的大小,Vite同时利用HTTP头来加速整个页面的重新加载(再次让浏览器为我们做更多事情) :源码模块的请求会根据384 Not Modified进行协商缓存,而依赖模块请求则会通过CacheControl:nax-age=315360be, in u table进行强缓存,因此一旦被缓存它们将不需要再次请求。一旦你体验到Vite有多快, 我们十分怀疑你是否愿意再忍受像普经那样使用打包器开发。为什么生产环境仍需打包尽管原生ESH现在得到了广泛支持, 但由于嵌套导入会导致额外的网络往返, 在生产环境中发布未打包的ESN仍然效率低下(即使使用HTTP/2) 。为了在生产环境中获得最佳的加载性能, 最好还是将代码进行tree-shaking、懒加载和chunk分割(以获得更好的缓存) ,要确保开发服务器和产品构建之间的最佳输出和行为一致并不容易。所以Vite附带了一套预配置、预优化的构建命令,开箱即用。为何不用ES Build打包?虽然es bull d快得惊人,并且已经是一个在构建库方面比较出色的工具,但一些针对构建应用的重要功能仍然还在持续开发中一特别是代码分副和CSS处理方面。就目前来说, Rollup在应用打包方面更加成熟和灵活。尽管如此,当未来这些功能稳定后,我们也不排除使用es build作为生产构建器的可能,Vite与X的区别是?
目录
开始
静志资源处肆
构建生产本
部署静志结点
环境变量与模式
服务塔演染(55R)
后媒全成
比较
从vl迁移
API
配置Vie
.............