Vite為什么快呢？快在哪？說一下我自己的理解吧
作者：Sunshine_Lin
簡介：「前端之神」的號主江湖人稱林三心，現(xiàn)已有100+篇原創(chuàng)文章，全網(wǎng)粉絲高達1w+，面試過超過100+個前端程序員，全網(wǎng)獲贊2w+，全網(wǎng)閱讀量播放量超過60w，更是B站「面試進階成為大佬」系列視頻的Up主。喜歡分享Vue，React，Typescript等高級前端知識。
來源：SegmentFault 思否社區(qū)
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。
由于這幾個月使用了 Vue3 + TS + Vite 進行開發(fā)，并且是真的被 Vite 強力吸粉了?。?！Vite最大的優(yōu)點就是：快?。?！非?？欤。?！
說實話，使用 Vite 開發(fā)之后，我都有點不想回到以前 Webpack 的項目開發(fā)了，因為之前的項目啟動項目需要 30s 以上，修改代碼更新也需要 2s 以上，但是現(xiàn)在使用 Vite ，差不多啟動項目只需要 1s ，而修改代碼更新也是超級快?。?！
那到底是為什么 Vite 可以做到這么快呢？官方給的解釋，真的很官方。。所以今天我想用比較通俗易懂的話來講講，希望大家能看一遍就懂。
問題現(xiàn)狀
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
項目啟動與代碼更新的問題
這個不用說，大家都懂：
項目啟動：隨著項目越來越大，啟動個項目可能要幾分鐘
代碼更新：隨著項目越來越大，修改一小段代碼，保存后都要等幾秒才更新
解決問題
解決啟動項目緩慢
依賴 ：一般是那種在開發(fā)中不會改變的JavaScript，比如組件庫，或者一些較大的依賴（可能有上百個模塊的庫），這一部分使用 esbuild 來進行 預構建依賴 , esbuild 使用的是 Go 進行編寫，比 JavaScript 編寫的打包器預構建依賴快 10-100倍
源碼 ：一般是哪種好修改幾率比較大的文件，例如 JSX、CSS、vue 這些需要轉(zhuǎn)換且時常會被修改編輯的文件。同時，這些文件并不是一股腦全部加載，而是可以按需加載（例如路由懶加載）。 Vite 會將文件轉(zhuǎn)換后，以 es module 的方式直接交給瀏覽器，因為現(xiàn)在的瀏覽器大多數(shù)都直接支持 es module ，這使性能提高了很多，為什么呢？咱們看下面兩張圖：
解決更新緩慢
生產(chǎn)環(huán)境
1、你代碼是放在服務器的，過多的瀏覽器加載依賴肯定會引起更多的網(wǎng)絡請求
2、為了在生產(chǎn)環(huán)境中獲得最佳的加載性能，最好還是將代碼進行 tree-shaking、懶加載和 chunk 分割、CSS處理，這些優(yōu)化操作，目前 esbuild 還不怎么完善
