Vite 为什么这么快? 为什么我推荐使用 vite

1,883 阅读2分钟

Vite 为什么启动这么快? 简单的分享一下理解

vite ?

引用官网的一句话

数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用 HMR,文件修改后的效果也需要几秒钟才能在浏览器中反映出来

为什么快?

Vite启动快的原因是启动的时候不需要做任何编译嘛,

当你打开页面的时候,当你的请求到达服务器的时候,才去编译。vite返回了不止一个请求,

比如说在app.vue后面加了一个query参数,type template而且服务器返回到的代码保留了ES Import的语法.

现在浏览器你用script type import equal module,这样的tag去引用一个JavaScript文件的时候,它是做为了ES Module 来处理的,所以浏览器看到就会再去服务器再去请求这些Import 的文件,这样的好处就是当前页面引用多少,我就编译多少.

在大型项目中就特别有优势,因为大项目可能有几十个路由,每一个路由可能只需要用到当前的那么10几个组件,当页面一大可能需要编译100个组件,才能把当前这个路由页面给跑起来。

发布的时候是怎样的?

在发布的时候用的是预配置的rollup,它的懒加载分包是用原生的ES import做的,动态import都可以被polyfilled

怎么支持低版本浏览器?

第一,要支持旧浏览器首先要polyfilled dynamic import,

第二,就是需要把你的包再用babel过一遍。

第三,webpack定位是纯打包工具,虽然他基于插件,但是需要很多配置。 vite定位就是开箱即用,用的go写的eS build支持了 jsx tsx typescript

而且完美支持react

差不多久这么多吧,更多的还是去看官网吧! 如果觉得不错,希望可以点个赞哈