Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[MOPCON 2020] vite: Make web dev fast again

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 與主流網站建構工具的差異。

Kuro Hsu

October 25, 2020
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

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 !