关于前端:Vite为什么快呢快在哪说一下我自己的理解吧

大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心。

因为这几个月应用了 Vue3 + TS + Vite 进行开发，并且是真的被 Vite 强力吸粉了！！！Vite 最大的长处就是：快！！！十分快！！！

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

那到底是为什么 Vite 能够做到这么快呢？官网给的解释，真的很官网。。所以明天我想用比拟通俗易懂的话来讲讲，心愿大家能看一遍就懂。

咱们都晓得，以前的浏览器是不反对 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

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群

关于前端:Vite为什么快呢快在哪说一下我自己的理解吧

前言

问题现状

ES 模块化反对的问题

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

解决问题

解决启动我的项目迟缓

解决更新迟缓

生产环境

结语