本文章將為大家介紹新一款的構(gòu)建工具——Vite，當(dāng)然我們Vite更多的是被用于開發(fā)階段，下面也為大家介紹到了 Vite 想比于 webpack 編譯中的優(yōu)勢，以及Vite構(gòu)建Vue3項目的步驟教程，趕快跟著我嘗試一下吧！
我們在前面使用Vue2進行開發(fā)的時候通常都是使用我們的vue-cli腳手架進行項目的搭建，cli腳手架中就是基于webpack進行構(gòu)建打包，webpack 作為代碼編譯工具，有入口、出口、loader 和插件。
webpack 是一個用于現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。
(資料圖片僅供參考)
當(dāng) webpack 處理應(yīng)用程序時，它會在內(nèi)部構(gòu)建一個依賴圖(dependency graph)，此依賴圖對應(yīng)映射到項目所需的每個模塊，并生成一個或多個 bundle。
從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less、sass 轉(zhuǎn)換成一個靜態(tài)文件，減少了頁面的請求?！鞠嚓P(guān)推薦：vuejs視頻教程、web前端開發(fā)】
關(guān)于webpack的介紹和配置以及使用這里就不過多介紹了，如果有小伙伴有興趣了解的話可以閱讀一些我早些前發(fā)布的兩篇文章 ? 安裝webpack及使用 、webpack相關(guān)配置，今天呢我們?yōu)榇蠹医榻B一款新型的構(gòu)建工具——Vite
Vite（法語意為 “快速的”，發(fā)音 /vit/，發(fā)音同 “veet”）是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗。它主要由兩部分組成：一個開發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。Vite 意在提供開箱即用的配置，同時它的 插件 API 和 JavaScript API 帶來了高度的可擴展性，并有完整的類型支持。
為什么選擇他？在瀏覽器支持 ES 模塊之前，JavaScript 并沒有提供的原生機制讓開發(fā)者以模塊化的方式進行開發(fā)。這也正是我們對 “打包” 這個概念熟悉的原因：使用工具抓取、處理并將我們的源碼模塊串聯(lián)成可以在瀏覽器中運行的文件。時過境遷，我們見證了諸如 webpack、Rollup 和 Parcel 等工具的變遷，它們極大地改善了前端開發(fā)者的開發(fā)體驗。然而，當(dāng)我們開始構(gòu)建越來越大型的應(yīng)用時，需要處理的 JavaScript 代碼量也呈指數(shù)級增長。包含數(shù)千個模塊的大型項目相當(dāng)普遍。我們開始遇到性能瓶頸 —— 使用 JavaScript 開發(fā)的工具通常需要很長時間（甚至是幾分鐘?。┎拍軉娱_發(fā)服務(wù)器，即使使用 HMR，文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來。如此循環(huán)往復(fù)，遲鈍的反饋會極大地影響開發(fā)者的開發(fā)效率和幸福感。Vite 旨在利用生態(tài)系統(tǒng)中的新進展解決上述問題：瀏覽器開始原生支持 ES 模塊，且越來越多 JavaScript 工具使用編譯型語言編寫。
webpack：編譯過程是將所有的依賴通過webpack進行打包編譯最后交給服務(wù)器進行渲染，所以速度會比較慢畢竟是加載所有的依賴進行處理，所以我們尤其是初次啟動cli腳手架項目的時候會等待依賴加載；
vite：使用 esbuild 預(yù)構(gòu)建依賴。esbuild 使用 Go 編寫，并且比以 JavaScript 編寫的打包器預(yù)構(gòu)建依賴快 10-100 倍。并且以 原生 ESM 方式提供源碼。這實際上是讓瀏覽器接管了打包程序的部分工作：Vite 只需要在瀏覽器請求源碼時進行轉(zhuǎn)換并按需提供源碼。根據(jù)情景動態(tài)導(dǎo)入代碼，即只在當(dāng)前屏幕上實際使用時才會被處理。說白了就是vite會直接啟動服務(wù)進行渲染，渲染過程中瀏覽器需要什么資源我們的服務(wù)會進行資源的請求處理，可以理解為需要什么請求什么。所以速度上 Vite 通過在一開始將應(yīng)用中的模塊區(qū)分為 依賴 和 源碼 兩類，改進了開發(fā)服務(wù)器啟動時間；
我們之前在使用vue-cli腳手架的時候，首先是將腳手架安裝到了全局中，以便后面創(chuàng)建Vue2項目使用，而Vite構(gòu)建工具是不需要我們?nèi)诌M行安裝的，我們可以通過下面的命令進行創(chuàng)建；注意 Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依賴更高的 Node 版本才能正常運行，當(dāng)你的包管理器發(fā)出警告時，請注意升級你的 Node 版本。
? 創(chuàng)建項目命令：
//使用 NPM:$ npm create vite@latest//使用 Yarn:$ yarn create vite//使用 PNPM:$ pnpm create vite
? 輸入文件名、選擇前端框架、選擇語言：
? 進入項目、安裝依賴、啟動項目（編譯速度非?？欤?/p>
? 項目啟動成功
大家動手實操一下吧，通過Vite構(gòu)建第一個Vue3項目，大家運行后可以自己使用VSCode打開代碼看一看，你能發(fā)現(xiàn)Vue3項目跟Vue2從代碼層面有多少處大的變化，也可以自己動手修改一下代碼。感受一下我們Vite編譯的速度！
（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）
以上就是認識Vue更高效的構(gòu)建工具—Vite的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
營業(yè)執(zhí)照公示信息