Vite 是由 Vue 之父 尤雨溪開發的新打包工具,可以說是 Vue Cli 的升級版,Cli 因為有依賴 webpack 解決了很多打包上複雜的問題,然而,當專案越來越大,打包時間隨著專案變大包跑得越久,大大降低了開發者的開發效率和幸福感。
vite 解決了開發速度上的痛點,秒啟動根本驚為天人⚡️⚡️⚡️!打包速度極快,不用像 vue-cli 要進行編譯後啟動,省了很多開發上的時間。
Vite 是什麼?
Vite 法語意為「快速」的意思,提供開發者一個快速啟動、即時更新的開發工具,預設無設定檔。
🔸 開發環境:基於瀏覽器原生 ES Module 提供的內建功能,能夠通過 import 和 export 連結檔案,並有基於 esbuild 的依賴預建構,擁有速度快到驚人的緩存模塊熱更新(HMR),Vite 會預先針對所有模組進行轉譯與打包,當瀏覽器再次請求某個模組時,就只針對被更改的模組進行編譯,這樣就能避免多次請求的問題了
📌 熱更新:Hot Module Replacement,簡稱 HMR,在不刷新瀏覽器的前提下就能夠對應用進行更新
🔸 生產環境:使用 Rollup 打包代碼,透過較快的時間來將檔案打包成更小容量。
Vite 安裝
使用 NPM
1 | npm create vite@latest |
使用 yarn
1 | yarn create vite |
接著依自己專案需求來做選擇(以下以 vue 為例)
Project name: (專案名稱)
1 | vite-project |
Select a framework: (選擇框架)
1 | vanilla |
Select a variant: (使用 js 或 ts)
1 | ✔ vue |
這樣就安裝完成了!!!另外還有更快速的指令,
你也可以通過附加的命令行選項直接指定專案名稱和框架模板
1 | # npm 6.x |
🔸 框架模板
JavaScript | TypeScript |
---|---|
vanilla | vanilla-ts |
vue | vue-ts |
react | react-ts |
preact | preact-ts |
lit | lit-ts |
svelte | svelte-ts |
注意:
Vite 需要 Node.js 版本 >= 12.0.0
vue 目前僅支援 vue3,所以不能使用與 vue3 不兼容的套件
引入檔案必須掛載副檔名
Vite 專案目錄結構
打開專案後,其實目錄結構跟 Cli 差不多,只是多了一個 vite 的設定檔 vite.config.js
比較特別的是,在 Cli 時 index.html 是在 public 文件夾內,而 Vite 放在最外層了,index.html 是 Vite 項目的入口文件,原碼也做了一些調整。
瀏覽器透過 JavaScript 的 <script type="module">
找到 main.js 進入點,便可以使用 ESM 語法,根據 import 的 url 路徑加載模組,
Vite 有根目錄的概念,index.html 中的 URL 自動轉換絕對路徑,也可以使用相對路徑導入,因此不再需要 %PUBLIC_URL% 佔位符了。
共用 SCSS 變數
vite 共用 SCSS 變數需在 vite.config
設定,
由於 vite 沒有內建 @ 的語法糖,如要使用需設定 alias,更多設定請參考官方文件
vite.config
1 | import { defineConfig } from 'vite' |
Vite 跟 Cli 對比
Vite | Vue-Cli | |
---|---|---|
打包工具 | rollup | webpack |
效能 | 快 | 慢 |
功能 | 功能較基本、簡單 | webpack 功能性較豐富 |
框架兼容 | 提供多種框架支援,Vue 只支援 Vue3 以上 | 僅支援 Vue 框架,Vue2、Vue3 都兼容 |
瀏覽器兼容 | 僅支援 ES6 的瀏覽器 | 因有 babel 可兼容多種瀏覽器 |
結語
Vite 的快速省了很多開發時間,是開發者的福音,尤雨溪在 twitter 也發表了,
Vite 會取代 Vue CLI 嗎?
起初,我也不確定,但是現階段我相信最終會是這樣。
你學會 vite 了嗎?
參考文獻
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。