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: (選擇框架)

vanilla
✔ vue
react
preact
lit
svelte

Select a variant: (使用 js 或 ts)

1 2	✔ vue vue-ts

這樣就安裝完成了！！！另外還有更快速的指令，
你也可以通過附加的命令行選項直接指定專案名稱和框架模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

🔸 框架模板

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css:{
    preprocessorOptions: {
       scss: {
         additionalData: `@import "@/assets/scss/variable.scss";`,
         charset: false,
       }
     }
  }
})

Vite 跟 Cli 對比

	Vite	Vue-Cli
打包工具	rollup	webpack
效能	快	慢
功能	功能較基本、簡單	webpack 功能性較豐富
框架兼容	提供多種框架支援，Vue 只支援 Vue3 以上	僅支援 Vue 框架，Vue2、Vue3 都兼容
瀏覽器兼容	僅支援 ES6 的瀏覽器	因有 babel 可兼容多種瀏覽器

結語

Vite 的快速省了很多開發時間，是開發者的福音，尤雨溪在 twitter 也發表了，
Vite 會取代 Vue CLI 嗎？

起初，我也不確定，但是現階段我相信最終會是這樣。

你學會 vite 了嗎?

參考文獻

Vite 官方文件

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

Vite 教學快速上手，秒安裝秒啟動