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

    View full-size slide

  2. Kuro Hsu
    - Front-End Developer
    - Organizers of Vue.js Taiwan
    - https://kuro.tw
    - [email protected]
    - @kurotanshi

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. ⼤綱
    • vite 是什麼 ? 解決了什麼問題

    • 理解 vite 運作原理

    • 剖析 vite 部分原始碼

    • 與現⾏主流⼯具的差異對比

    View full-size slide

  6. vite 是什麼
    • vite 發⾳ / vit / ,是法語中「快速」的意思

    • 提供開發者⼀個快速啟動、即時更新的

    「開發⼯具」

    • 安裝即使⽤,預設無設定檔

    • 加速你的開發體驗,不加速你的應⽤效能

    View full-size slide

  7. vite 作者
    • Evan You

    • 同樣是 Vue.js 的作者

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

    •v1.0.0-rc.6

    View full-size slide

  8. vite 解決了什麼問題

    View full-size slide

  9. 實際比較

    View full-size slide

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

    View full-size slide

  11. vite 為什麼這麼快

    View full-size slide

  12. vue-cli-service serve
    build

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 從建立 vite 專案開始

    View full-size slide

  24. Bare Module Resolving

    View full-size slide

  25. Bare Module Resolving

    View full-size slide

  26. 原⽣ ES Module 標準

    View full-size slide

  27. ES modules: A cartoon deep-dive

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

    View full-size slide

  28. ES modules: A cartoon deep-dive

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

    View full-size slide

  29. ES modules: A cartoon deep-dive

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

    View full-size slide

  30. ES modules: A cartoon deep-dive

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

    View full-size slide

  31. 為了你,總是擋在最前⾯

    View full-size slide

  32. on-demand compilation

    View full-size slide

  33. vite 核⼼組成

    View full-size slide

  34. • 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 full-size slide

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

    View full-size slide

  36. • 開發階段 - dev serve

    • koa static web server (dev-server)

    • static-files path rewrite

    • HMR

    • 打包建置 - build

    • 使⽤ rollup 打包

    • 相依模組預先快取 - optimize

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. /src/node/server/index.ts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. /src/node/server/serverPluginModuleRewrite.ts

    View full-size slide

  43. /src/node/server/serverPluginModuleRewrite.ts

    View full-size slide

  44. CSS 編譯與更新

    View full-size slide

  45. /src/node/server/serverPluginCss.ts

    View full-size slide

  46. /src/node/server/serverPluginCss.ts

    View full-size slide

  47. /src/client/client.ts

    View full-size slide

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

    View full-size slide

  49. /src/node/optimizer/index.ts

    View full-size slide

  50. /src/node/optimizer/index.ts

    View full-size slide

  51. 有了 ESM
    專案還需要打包嗎?

    View full-size slide

  52. vite ⚡
    vue-cli

    View full-size slide

  53. HTTP/1.1 ->- HTTP/2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. • vite 解決什麼問題?

    • vite 只能⽤在 vue 上⾯嗎?

    • Vue CLI / webpack 會被 vite 取代嗎?

    • vite 可以⽤在正式專案上嗎?
    Recap

    View full-size slide

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

    View full-size slide