[MOPCON 2020] vite: Make web dev fast again

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
October 25, 2020

[MOPCON 2020] vite: Make web dev fast again

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

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

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

October 25, 2020
Tweet

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 解決了什麼問題

  9. None
  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 專案開始

  25. None
  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/

  33. None
  34. None
  35. 為了你,總是擋在最前⾯

  36. on-demand compilation

  37. None
  38. None
  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

  50. None
  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

  58. None
  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 !