初識Vite

Vite是什么

是腳手架？是構(gòu)建工具？

首先搞清楚這兩者的定義：

  1. 腳手架：幫助我們搭建開發(fā)環(huán)境的項目代碼的工具
  2. 構(gòu)建工具：將代碼從開發(fā)環(huán)境構(gòu)建到生產(chǎn)環(huán)境

構(gòu)建工具的發(fā)展：

  1. 第一代構(gòu)建工具：以 npm scripts、grunt、gulp 為代表的構(gòu)建工具，這一代構(gòu)建工具所做的事情主要就是編譯、合并以及壓縮等工作。
  2. 第二代構(gòu)建工具：以 browserify、webpack、parcel、rollup 為代表的構(gòu)建工具。這一代構(gòu)建工具加強了對模塊的處理，能夠?qū)δK的依賴關(guān)系進行處理，對模塊進行合并打包。
  3. 第三代構(gòu)建工具：主要就是往“繡化”的方向發(fā)展。就是使用 Rust 將前端工具鏈全部重構(gòu)一遍
    • Babel ---> swc
    • PostCSS ---> lightingCSS
    • Electron ---> Tauri
    • ESLint ----> dprint
    • Webpack ---> Turbopack、Rspack
    • rollup ---> rolldown

腳手架的發(fā)展：本身是幫助開發(fā)者搭建開發(fā)環(huán)境項目的工具，但是現(xiàn)代腳手架往往內(nèi)置構(gòu)建工具

  • VueCLI：內(nèi)置了 webpack 作為構(gòu)建工具
  • CreateReactApp：內(nèi)置了 webpack 作為構(gòu)建工具

現(xiàn)在腳手架和構(gòu)建工具的界限比較模糊了，你可以認為構(gòu)建工作是腳手架工具里面的一部分。

Vite也是相同的情況：

  1. 腳手架：可以搭建各種類型（Vue、React、Sevlte、Solid.js）的項目
  2. 構(gòu)建：包含兩個構(gòu)建工具
    • esbuild：用于開發(fā)環(huán)境
    • rollup：用于生產(chǎn)環(huán)境

Vite核心原理

  1. webpack的痛點在哪里？

    • 在構(gòu)建大型項目的時候，非常的慢

    • 因為在啟動 webpack 項目的時候，webpack 會先對項目進行打包，然后運行的是打包后的文件

(
webpack打包原理

)

  1. Vite是如何解決的？

    • 完全跳過打包步驟，利用瀏覽器的 imports 機制，按需獲取內(nèi)容


      vite打包原理
  • vite針對 .vue 這樣的模塊文件，需要做編譯，編譯為 JS 文件再返回給瀏覽器，vite會劫持瀏覽器發(fā)送的請求，然后將.vue后綴結(jié)尾的文件編譯為js文件
vite服務(wù)器
  • 關(guān)于 Vite 中熱更新的實現(xiàn)，底層實際上使用的是 websocket 來實現(xiàn)的。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容