# Vite

---

## Agenda

1. 介紹
2. 特色
3. 使用
4. DEMO
5. 專案

---

## 介紹

----

### Vite

近幾年前端業界熱門的建構工具 (build tool)，
大幅地簡化了前端建構的流程與時間

Note:
🔔 科普：Vite 在法語中代表的是「快速的」意思

----

| | Vite |
| ----- | --------------- |
| 作者 | 尤雨溪 - Vue.js 作者 |
| 底層語言 | Go（esbuild） |
| 發布時間 | 2020/11 |
| 支援框架 | React / Vue /... |

----

### 用一句話介紹

打包工具 (build tool)：你寫的 code 轉譯成適合部署的程式

---

## 特色

Note:
他跟其他 build tool (Vue CLI) 有什麼過人之處？

----

### 1. 可以建立 Vue、React... 專案


----

### 2. 快速的冷服務啟動

在開發時不做打包，而是用原生瀏覽器支援的 es6 module 來載入相依性
( 不過在 production build 時還是會做打包，而且用的是 rollup )

----

### 3. 最後封裝：使用 [Rollup](https://rollupjs.org/) 打包

作為以「原生 ESM」為主的前端建構工具，
在選擇打包工具時也是希望選擇基於原生ESM的打包工具

Rollup 符合此需求，不僅是基於 ES2015 的打包工具
最大特色還可以透過較快的時間來將檔案打包成更小容量

Note:
通過使用 export 和 import，ES Modules 允許在瀏覽器端匯入和匯出模組

----

### 4. 開發環境：使用 esbuild 打包 (1)

esbuild 是使用 Go 語言來編寫的
esbuild 是一個新型的 JavaScript 打包工具，相較於其他打包工具快!
Webpack5 打包需要 54.5s，而 esbuild 只需 0.37s。

Note:
為什麼可以這麼快？
esbuild 是使用 Go 語言來編寫的，
而在Go語言的核心是採取併行性且有內存管理的機制，
所以 esbuild 可以充分利用 CPU 來大量使用並行及內存機制，
另外一個原因是 esbuild 在開發時是採取全部自己撰寫程式，無使用到 第三方模組

----

### 4. 開發環境：使用 esbuild 打包 (2)


----

### 5. 熱更新 (HMR)

Server 與 browser 建立一個 websocket 連線，
當程式碼被修改時 Server 會傳送訊息通知 browser 去請求修改模組的程式碼

流程
1. 啟動 server，使用 chokidar 對檔案監聽，針對更動進行相應處理
2. 在 html 載入 ws client 文件
3. server 監聽檔案變化發送 websocket 訊息通知 browser
4. browser 接受到訊息，可以根據內容決定要刷新頁面還是更新變化檔案，
  同時執行相關檔案 注入ws client 時設置的 hmr hook 函數

Note:
優點
1. 修改程式碼時，可以即時更新畫面
2. 實現部分跟新，避免多餘請求
3. 保有原本狀態

----

### 6. 按需進行編譯 (不會刷新全部 DOM)

----

### Vite vs Vue-CLI

1. 開發模式的差異
2. 對 ES Modules 支援
    使用 export 和 import，ES Modules
3. 底層語言的差異
    Webpack 是基於 Node.js，Vite 基於 esbuild(Go 語言)
4. 熱更新的處理
    Vite 當某個模組內容改變時，只需要讓瀏覽器重新請求該模組即可

---

## 使用

----

### 注意

🔔 Vite 需要 Node.js 版本 >= 12.0.0

----

### 建立專案

# 建立專案
# 接下來會有步驟問候要使用的技術與專案名稱
npm create vite@latest


# 建立 vue 樣板的專案
npm create vite@latest [專案名稱] -- --template vue

----

### package.json 指令

{
  "scripts": {
    // 啟動開發服務器
    // (別名：vite dev / vite serve)
    // 可以指定額外的命令行選項，如 --port 或 --https
    "dev": "vite",
    // 為生產環境構建產物
    "build": "vite build",
  }
}

----

### [設定檔](https://cn.vitejs.dev/config/)

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
 
export default defineConfig({
  plugins: [vue()],
  css: {
  },
  build: {
    minify: "terser", // 必須開啟：使用terserOptions才有效果
    terserOptions: {
      compress: {
        //生產環境時移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), 
      "comp": resolve(__dirname, "src/components"),
      // 設定圖片要這樣引用也可以自訂方法引入圖片靜態資源
      "/img": "./src/assets",
    },
  },
  // 跨域
  server: {
    host: "0.0.0.0",
    hmr: true,
    strictPort: false,
    //自訂代理規則
    proxy: {
      // 選項寫法
      "/api": {
        target: "",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ""),
      },
    },
  },
});

---

## DEMO

讓我們建立一個純 js 專案

Note:
1. 建立一個專案
2. 跑出一個基本的專案架構
3. 可以直接測試與打包
4. 需求變更：打包想要把相關內容放在同一隻檔案中
1. 安裝 vite-plugin-singlefile

    npm install vite-plugin-singlefile --save-dev

2. 建立 vite.config.ts

    vim vite.config.ts

3. vite.config.ts 內容

    import { defineConfig } from "vite"
    import { viteSingleFile } from "vite-plugin-singlefile"

    export default defineConfig({
        plugins: [viteSingleFile()],
    })

---

## 專案

----