尤大大在开发vue3.0时用的是原生的es-modules的构建工具(vite)

Vite--跨前端框架的能力,及其优越的性能(下一代前端构建的打包工具)

  • 新项目中投入使用vite构建工具
  • webpack转载到vite的小伙伴
  • 充实自己,开拓创建

vite的组成:一个开发服务器;一套构建指令

为什么选择vite,比webpack强在哪里

解析:在浏览器支持ES模块之前,JS并没有提供原生的机制,让我们开发者以模块的方式进行开发,这也正是我们对打包这个体系概念熟悉的原因。

打包的工作具体就是使用工具抓取处理并将我们的源代码模块串联成可以在浏览器中运行的文件

viper架构 什么叫vie架构_webpack

为什么选择Vite?

对比之前的服务器:缓慢的服务器启动。缓慢的更新。

缓慢的服务器启动:

viper架构 什么叫vie架构_服务器_02

webpack会先打包,然后启动开发服务器,请求服务器时直接给与打包结果

它是基于打包服务器来启动的,必须优先于抓取我们的整个应用,才能把提供的服务主要体现在“依赖”和“源码”两方面

依赖:大多数的依赖都是在开发时不变动,一些纯JS代码较大的依赖处理代价也很高(例如:上百个模块组件库,依赖也通常存在多种模块化的格式,比如ESM或CommonJS这样的格式导入)

源赖:业务源码包含一些并不是传JS的文件这些文件可能不需要转化,编辑,比如JS,CSS或React,Vue组件,同时并不是所有的源码都需要同时被加载(例如基于路由的拆分的代码模块),传统打包器需构建整个应用,这种对打包的依赖和源码的处理方式势必导致服务器启动缓慢。

缓慢的更新:

随体积的增长而直线下降一些打包器的开发服务器,将构建的内容存入内存,比如webpack就是这样处理的,他们只需要在文件更改的时候使模块的一部分失活,但他扔需要整个重新构建,并重载页面这样代价很重要,新加载的页面会清除应用的当前状态,所以打包器支持了动态模块热重载,也就是HMR,他允许一个模块热替换他自己而不会影响页面其余的部分,大大改变了开发的体验,规模热更新也会随应用的规模增长而显著下降。

Vite:利用生态系统中的新进展来解决上述问题,也就是浏览器开始支持原生的ES模块

viper架构 什么叫vie架构_服务器_03

 

快速服务器启动

Vite一开始将应用中的模块区分,依赖和源码两类,vite将会使用ESBuild来构建依赖,用go语言来编写比js编写快10-100倍,另外,vite以原生的ESM方式提供源码这实际上是浏览器来接请求源码问题的时候进行转换并按需提供源码根据场景动态的导入代码,也就是只在当前屏幕上实际使用时才会被处理

快速的更新

Vite的HMR是在原生的ESM上执行的当编辑一个文件的时候,Vite只需精确的使已编辑的模块与其最近的HMR边界之间的链失活,使得无论应用大小如何,HMR始终保持快速更新。因为大多数的时候只是模块本身被更新了而已,Vite同时利用用http头,来加速整个页面的重新加载源码模块的请求会根据304来进行协商缓存而依赖模块的请求会通过Cache,Control来进行强缓存,因此一旦被缓存他们将不再需要再次请求说白了就是浏览器为我们做更多的缓存。