[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
   ⚡
   

   View Slide

2. Kuro Hsu
   - Front-End Developer
   - Organizers of Vue.js Taiwan
   - https://kuro.tw
   - kurotanshi@gmail.com
   - @kurotanshi
   

   View Slide

3. https://book.vue.tw
   ⼯商宣傳
   

   View Slide

4. Vue.js Taiwan
   https://vue.tw
   

   View Slide

5. ⼤綱
   • vite 是什麼 ? 解決了什麼問題
   
   • 理解 vite 運作原理
   
   • 剖析 vite 部分原始碼
   
   • 與現⾏主流⼯具的差異對比
   

   View Slide

6. vite 是什麼
   • vite 發⾳ / vit / ，是法語中「快速」的意思
   
   • 提供開發者⼀個快速啟動、即時更新的

   「開發⼯具」
   
   • 安裝即使⽤，預設無設定檔
   
   • 加速你的開發體驗，不加速你的應⽤效能
   ⚡
   

   View Slide

7. vite 作者
   • Evan You
   
   • 同樣是 Vue.js 的作者
   
   • https://github.com/vitejs/vite
   
   •v1.0.0-rc.6
   

   View Slide

8. vite 解決了什麼問題
   

   View Slide

9. View Slide

10. 實際比較
    

    View Slide

11. from: https:///twitter.com/i/status/1290410811802804226
    

    View Slide

12. vite 為什麼這麼快
    

    View Slide

13. vue-cli-service serve
    build
    

    View Slide

14. vue-cli-service serve
    build
    Bundle
    (in memory)
    

    View Slide

15. vue-cli-service serve
    build
    Web server
    Bundle
    (in memory)
    

    View Slide

16. vue-cli-service serve
    build
    Web server
    發送請求
    Bundle
    (in memory)
    

    View Slide

17. vue-cli-service serve
    build
    Web server
    回應
    發送請求
    Bundle
    (in memory)
    

    View Slide

18. vue-cli-service serve
    Web server
    回應
    發送請求
    程式更新
    build
    Bundle
    (in memory)
    

    View Slide

19. vue-cli-service serve
    build
    Bundle
    (in memory)
    Web server
    回應更新
    發送請求
    程式更新
    

    View Slide

20. ⚡ vite serve ⚡
    不編譯直接啟動
    Static web
    server
    

    View Slide

21. ⚡ vite serve ⚡
    發送請求
    不編譯直接啟動
    Static web
    server
    

    View Slide

22. ⚡ vite serve ⚡
    發送請求
    回應請求
    推送更新
    ⚡ vite serve ⚡
    不編譯直接啟動
    即時編譯
    (需要的部分)
    Static web
    server
    

    View Slide

23. source: https://www.snowpack.dev/
    

    View Slide

24. 從建立 vite 專案開始
    

    View Slide

25. View Slide

26. Bare Module Resolving
    

    View Slide

27. Bare Module Resolving
    

    View Slide

28. 原⽣ ES Module 標準
    

    View Slide

29. ES modules: A cartoon deep-dive

    https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
    

    View Slide

30. ES modules: A cartoon deep-dive

    https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
    

    View Slide

31. ES modules: A cartoon deep-dive

    https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
    

    View Slide

32. ES modules: A cartoon deep-dive

    https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
    

    View Slide

33. View Slide

34. View Slide

35. 為了你，總是擋在最前⾯
    

    View Slide

36. on-demand compilation
    

    View Slide

37. View Slide

38. View Slide

39. vite 核⼼組成
    

    View Slide

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 的⽀援 )
    

    View Slide

41. 剖析 vite 部分原始碼
    ( 是 vite 的原始碼，不是建立後的專案原始碼 )
    

    View Slide

42. • 開發階段 - dev serve
    
    • koa static web server (dev-server)
    
    • static-files path rewrite
    
    • HMR
    
    • 打包建置 - build
    
    • 使⽤ rollup 打包
    
    • 相依模組預先快取 - optimize
    

    View Slide

43. client 端程式碼，
    主要是 socket 與 HMR 相關
    打包相關
    預先編譯與快取
    dev-server 相關，
    含各種 Plugins
    esbuild 相關
    定義 HMR interface
    vite.config.js
    設定檔定義相關
    

    View Slide

44. koa 建立開發伺服器
    /src/node/server/index.ts
    

    View Slide

45. /src/node/server/index.ts
    

    View Slide

46. /src/client/client.ts
    Hot Module Replacement
    

    View Slide

47. /src/node/utils/pathUtils.ts
    /src/node/server/serverPluginModuleRewrite.ts
    攔截 requests、 替換路徑
    

    View Slide

48. /src/node/server/serverPluginModuleRewrite.ts
    

    View Slide

49. /src/node/server/serverPluginModuleRewrite.ts
    

    View Slide

50. View Slide

51. CSS 編譯與更新
    

    View Slide

52. /src/node/server/serverPluginCss.ts
    

    View Slide

53. /src/node/server/serverPluginCss.ts
    

    View Slide

54. /src/client/client.ts
    

    View Slide

55. Optimize 模組相依快取
    /src/node/optimizer/index.ts
    

    View Slide

56. /src/node/optimizer/index.ts
    

    View Slide

57. /src/node/optimizer/index.ts
    

    View Slide

58. View Slide

59. 有了 ESM
    專案還需要打包嗎？
    

    View Slide

60. vite ⚡
    vue-cli
    

    View Slide

61. HTTP/1.1 ->- HTTP/2
    

    View Slide

62. HTTP/1.1
    HTTP/2
    3 TCP connections
    Single TCP connection
    

    View Slide

63. https://http2.akamai.com/demo
    

    View Slide

64. Recap
    

    View Slide

65. • vite 解決什麼問題？
    
    • vite 只能⽤在 vue 上⾯嗎？
    
    • Vue CLI / webpack 會被 vite 取代嗎？
    
    • vite 可以⽤在正式專案上嗎？
    Recap
    

    View Slide

66. https://github.com/vitejs/vite
    

    View Slide

67. Thanks !
    

    View Slide