# vite: Make web dev fast again. - Kuro Hsu

{%hackmd rG6pzIawQKe5cHU4rycgYg %}

:::success
:::spoiler TableOfContent
[TOC]
:::

[vitejs/vite](https://github.com/vitejs/vite)

[重新認識 Vue.js](https://book.vue.tw/)

[簡報](https://speakerdeck.com/kurotanshi/mopcon-2020-vite-make-web-dev-fast-again)

## vite 是什麼？解決了什麼問題
- vite 發音 /vit/，法語「快速」的意思
- 提供開發者快速啟動、即時更新的開發工具
>加速開發，但不是加速體驗速度
- 安裝即使用，預設無設定檔
- 加速你的開發體驗，不加速你的應用效能

### 作者
尤雨溪 (Evan You)
- Vue.js的發起人
- 理念：做得好可以徹底解決改一行代碼等半天熱更新的問題。
- [vite github](https://github.com/vitejs/vite)
## 理解 vite 運作原理

- 瀏覽器請求的 response 直接編譯，跳過打包。有益於原本 webpack 專案每次修改就要打包重啟 web server 的作法，可以加快開發速度。
- 用 vite 改寫的專案，原本要打包 4 秒，可以縮短到 1 秒。
- [twitter 大大的比較](https://twitter.com/i/status/1282727239230996480)
- webpack v.s. vite：
- webpack 要經過編譯、打包、run server
- vite 不進行編譯、打包，直接 run server，它會即時編譯，只編譯**需要的部分**。（只編譯當前使用的 component）
- 與 vite 類似的原理 [Snowpack](https://www.snowpack.dev/)


## 剖析 vite 部分原始碼
### 透過瀏覽器觀察 vite 行為
- 因為沒有編譯、打包，所以會在 Request 發現許多請求，跟 webpack 的差異在於，webpack 打包好給瀏覽器用。而 vite 透過轉換成相對路徑，透過 es module 語法引入 module。
- 會即時用 WebSocket 更新變更的 component。

[ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
### 原生 ES Module 標準
`<script src="main.js" type="module"></script>`
必須是絕對或是相對路徑，才能讀取到該 module。
- [瀏覽器支援度](https://caniuse.com/?search=javascript%20modules)：

> 但 vite 是開發過程的輔助工具，開發時沒有使用不支援的瀏覽器就不需要太過擔心瀏覽器支援程度。

### vite 開發時所使用的套件
- Native ES Module
- [koa](https://koajs.com/)
- [chokidar](https://github.com/paulmillr/chokidar)
- [esbuild](https://github.com/evanw/esbuild)
- [rollup.js](https://github.com/rollup/rollup)
- @vue/compiler-sfc(optional)

### 工具內部構造、原始碼語法特色

- 由於不進行再編譯，故透過 WebSocket 的推送進行元件更新。
- 在模組相依部分，其實還是有做轉譯及編譯的動作。
- 預設不編譯，可以在 run serve 指令時用 `--force` option 強迫編譯。
- optimize 本身有 cache 機制，故可以用 `--force` 繞過 cache 。

## 與現行主流工具的差異對比
- 預設產生的request較多
- 可以透過升級成 HTTP2 來解決問題。

## 總結
- vite 解決什麼問題？
- vite 用來提高開發體驗
- vite 只能用在 vue 上面嗎？
- 不只用在 vue 上面，twitter 的例子也有用在 react 上面。
- Vue Cli/ webpack 會被vite取代嗎？
- 不是用來取代，而是增加開發選項
- vite 可以用在正式專案上嗎？
- 實驗、小型專案推薦使用
- 大包、從 webpack轉的不推薦(之前的外掛不能用)

[awesome-vite.js 是可參考的專案](https://github.com/vitejs/awesome-vite)

# 聊天區
<!-- 我都念vite -->
窩不知道要唸 vite，連主持人都唸錯，窩怎麼可能唸對
<!-- wwwwwww -->
辣個瀏覽器，為了你，總是擋在最前面(講者對IE的吐嘲)

###### tags: `MOPCON 2020`