Vite为什么快呢？快在哪？说一下我自己的理解吧

Posted 2022-01-07 SHERlocked93

前言

---

由于这几个月使用了 Vue3 + TS + Vite 进行开发，并且是真的被 Vite 强力吸粉了！！！Vite最大的优点就是：快！！！非常快！！！

说实话，使用 Vite 开发之后，我都有点不想回到以前 Webpack 的项目开发了，因为之前的项目启动项目需要 30s 以上，修改代码更新也需要 2s 以上，但是现在使用 Vite ，差不多启动项目只需要 1s ，而修改代码更新也是超级快！！！

那到底是为什么 Vite 可以做到这么快呢？官方给的解释，真的很官方。。所以今天我想用比较通俗易懂的话来讲讲，希望大家能看一遍就懂。

问题现状

---

ES模块化支持的问题

咱们都知道，以前的浏览器是不支持 ES module 的，比如：

// index.js

import  add  from './add.js'
import  sub  from './sub.js'
console.log(add(1, 2))
console.log(sub(1, 2))

// add.js
export const add = (a, b) => a + b 

// sub.js
export const sub = (a, b) => a - b

你觉得这样的一段代码，放到浏览器能直接运行吗？答案是不行的哦。那怎么解决呢？这时候打包工具出场了，他将 index.js、add.js、sub.js 这三个文件打包在一个 bundle.js 文件里，然后在项目 index.html 中直接引入 bundle.js ，从而达到代码效果。一些打包工具，都是这么做的，例如 webpack、Rollup、Parcel

项目启动与代码更新的问题

这个不用说，大家都懂：

• 项目启动：随着项目越来越大，启动个项目可能要几分钟

• 代码更新：随着项目越来越大，修改一小段代码，保存后都要等几秒才更新

解决问题

---

解决启动项目缓慢

Vite 在打包的时候，将模块分成两个区域 依赖 和 源码 ：

• 依赖 ：一般是那种在开发中不会改变的javascript，比如组件库，或者一些较大的依赖（可能有上百个模块的库），这一部分使用 esbuild 来进行 预构建依赖 , esbuild 使用的是 Go 进行编写，比 JavaScript 编写的打包器预构建依赖快 10-100倍

• 源码 ：一般是哪种好修改几率比较大的文件，例如 JSX、CSS、vue 这些需要转换且时常会被修改编辑的文件。同时，这些文件并不是一股脑全部加载，而是可以按需加载（例如路由懒加载）。 Vite 会将文件转换后，以 es module 的方式直接交给浏览器，因为现在的浏览器大多数都直接支持 es module ，这使性能提高了很多，为什么呢？咱们看下面两张图：

第一张图，是以前的打包模式，就像之前举的 index.js、add.js、sub.js 的例子，项目启动时，需要先将所有文件打包成一个文件 bundle.js ，然后在 html 引入，这个 多文件 -> bundle.js 的过程是非常耗时间的。

第二张图，是 Vite 的打包方式，刚刚说了， Vite 是直接把转换后的 es module 的JavaScript代码，扔给 支持es module的浏览器 ，让浏览器自己去加载依赖，也就是把压力丢给了 浏览器 ，从而达到了项目启动速度快的效果。

解决更新缓慢

刚刚说了，项目启动时，将模块分成 依赖 和 源码 ，当你更新代码时， 依赖 就不需要重新加载，只需要精准地找到是哪个 源码 的文件更新了，更新相对应的文件就行了。这样做使得更新速度非常快。

Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

生产环境

---

刚刚咱们说的都是 开发环境 ，也说了， Vite 在是直接把转化后的 es module 的JavaScript，扔给浏览器，让浏览器根据依赖关系，自己去加载依赖。

那有人就会说了，那放到 生产环境 时，是不是可以不打包，直接在开个 Vite 服务就行，反正浏览器会自己去根据依赖关系去自己加载依赖。答案是不行的，为啥呢：

• 1、你代码是放在服务器的，过多的浏览器加载依赖肯定会引起更多的网络请求

• 2、为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割、CSS处理，这些优化操作，目前 esbuild 还不怎么完善

所以 Vite 最后的打包是使用了 Rollup

---

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）

2. 欢迎加我微信「qianyu443033099」拉你进技术群，长期交流学习...

3. 关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个在看支持我吧，转发就更好了