[MOPCON 2020] vite: Make web dev fast again

vite 是一套網站開發的構建工具，它由 Vue.js 的作者 Evan 所開發。
vite 在法文的意思是「快」，如同其字面上的含義，作者的目標是打造一套如閃電般的快速開發環境。

在本場議程中，除了為各位介紹 vite 帶來的特性外，也示範透過 vite 來啟動一個全新的 Vue.js 3.0 專案，簡單說明 vite 可以為我們做到什麼、vite 運作的原理，以及 vite 的部分原始碼。 最後再橫向對比 vite 與主流網站建構工具的差異。

Transcript

1. vite: Make web dev fast again Kuro Hsu @ MOPCON 2020 2020/10/25 ⚡
2. Kuro Hsu - Front-End Developer - Organizers of Vue.js Taiwan - https://kuro.tw - kurotanshi@gmail.com - @kurotanshi
3. https://book.vue.tw ⼯商宣傳
4. Vue.js Taiwan https://vue.tw
5. ⼤綱 • vite 是什麼 ? 解決了什麼問題 • 理解 vite 運作原理 • 剖析 vite 部分原始碼 • 與現⾏主流⼯具的差異對比
6. vite 是什麼 • vite 發⾳ / vit / ，是法語中「快速」的意思 • 提供開發者⼀個快速啟動、即時更新的
 「開發⼯具」 • 安裝即使⽤，預設無設定檔 • 加速你的開發體驗，不加速你的應⽤效能 ⚡
7. vite 作者 • Evan You • 同樣是 Vue.js 的作者 • https://github.com/vitejs/vite •v1.0.0-rc.6
8. vite 解決了什麼問題
10. 實際比較
11. from: https:///twitter.com/i/status/1290410811802804226
12. vite 為什麼這麼快
13. vue-cli-service serve build
14. vue-cli-service serve build Bundle (in memory)
15. vue-cli-service serve build Web server Bundle (in memory)
16. vue-cli-service serve build Web server 發送請求 Bundle (in memory)
17. vue-cli-service serve build Web server 回應 發送請求 Bundle (in memory)
18. vue-cli-service serve Web server 回應 發送請求 程式更新 build Bundle (in memory)
19. vue-cli-service serve build Bundle (in memory) Web server 回應更新 發送請求 程式更新
20. ⚡ vite serve ⚡ 不編譯直接啟動 Static web server
21. ⚡ vite serve ⚡ 發送請求 不編譯直接啟動 Static web server
22. ⚡ vite serve ⚡ 發送請求 回應請求 推送更新 ⚡ vite serve ⚡ 不編譯直接啟動 即時編譯 (需要的部分) Static web server
23. source: https://www.snowpack.dev/
24. 從建立 vite 專案開始
26. Bare Module Resolving
27. Bare Module Resolving
28. 原⽣ ES Module 標準
29. ES modules: A cartoon deep-dive
 https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
30. ES modules: A cartoon deep-dive
 https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
31. ES modules: A cartoon deep-dive
 https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
32. ES modules: A cartoon deep-dive
 https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
35. 為了你，總是擋在最前⾯
36. on-demand compilation
39. vite 核⼼組成
40. • Native ES Module • koa ( https://koajs.com/ ) • chokidar ( https://github.com/paulmillr/chokidar ) • esbuild ( https://github.com/evanw/esbuild ) • rollup.js ( https://rollupjs.org ) • @vue/compiler-sfc ( optional, 對 vue SFC 的⽀援 )
41. 剖析 vite 部分原始碼 ( 是 vite 的原始碼，不是建立後的專案原始碼 )
42. • 開發階段 - dev serve • koa static web server (dev-server) • static-files path rewrite • HMR • 打包建置 - build • 使⽤ rollup 打包 • 相依模組預先快取 - optimize
43. client 端程式碼， 主要是 socket 與 HMR 相關 打包相關 預先編譯與快取 dev-server 相關， 含各種 Plugins esbuild 相關 定義 HMR interface vite.config.js 設定檔定義相關
44. koa 建立開發伺服器 /src/node/server/index.ts
45. /src/node/server/index.ts
46. /src/client/client.ts Hot Module Replacement
47. /src/node/utils/pathUtils.ts /src/node/server/serverPluginModuleRewrite.ts 攔截 requests、 替換路徑
48. /src/node/server/serverPluginModuleRewrite.ts
49. /src/node/server/serverPluginModuleRewrite.ts
51. CSS 編譯與更新
52. /src/node/server/serverPluginCss.ts
53. /src/node/server/serverPluginCss.ts
54. /src/client/client.ts
55. Optimize 模組相依快取 /src/node/optimizer/index.ts
56. /src/node/optimizer/index.ts
57. /src/node/optimizer/index.ts
59. 有了 ESM 專案還需要打包嗎？
60. vite ⚡ vue-cli
61. HTTP/1.1 ->- HTTP/2
62. HTTP/1.1 HTTP/2 3 TCP connections Single TCP connection
63. https://http2.akamai.com/demo
64. Recap
65. • vite 解決什麼問題？ • vite 只能⽤在 vue 上⾯嗎？ • Vue CLI / webpack 會被 vite 取代嗎？ • vite 可以⽤在正式專案上嗎？ Recap
66. https://github.com/vitejs/vite
67. Thanks !