owned this note   changed 5 years ago  
Linked with GitHub

vite: Make web dev fast again. - Kuro Hsu

歡迎來到 MOPCON 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@mopcon/2020
手機版請點選上方 按鈕展開議程列表。

TableOfContent

vitejs/vite

重新認識 Vue.js

簡報

vite 是什麼？解決了什麼問題

  • vite 發音 /vit/，法語「快速」的意思
  • 提供開發者快速啟動、即時更新的開發工具

    加速開發，但不是加速體驗速度

  • 安裝即使用，預設無設定檔
  • 加速你的開發體驗，不加速你的應用效能

作者

尤雨溪 (Evan You)

  • Vue.js的發起人
  • 理念：做得好可以徹底解決改一行代碼等半天熱更新的問題。
  • vite github

理解 vite 運作原理

  • 瀏覽器請求的 response 直接編譯，跳過打包。有益於原本 webpack 專案每次修改就要打包重啟 web server 的作法，可以加快開發速度。
  • 用 vite 改寫的專案，原本要打包 4 秒，可以縮短到 1 秒。
  • twitter 大大的比較
  • webpack v.s. vite：
    • webpack 要經過編譯、打包、run server
    • vite 不進行編譯、打包，直接 run server，它會即時編譯，只編譯需要的部分。（只編譯當前使用的 component）
  • 與 vite 類似的原理 Snowpack

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

剖析 vite 部分原始碼

透過瀏覽器觀察 vite 行為

  • 因為沒有編譯、打包，所以會在 Request 發現許多請求，跟 webpack 的差異在於，webpack 打包好給瀏覽器用。而 vite 透過轉換成相對路徑，透過 es module 語法引入 module。
  • 會即時用 WebSocket 更新變更的 component。

ES modules: A cartoon deep-dive

原生 ES Module 標準

<script src="main.js" type="module"></script>
必須是絕對或是相對路徑，才能讀取到該 module。

但 vite 是開發過程的輔助工具，開發時沒有使用不支援的瀏覽器就不需要太過擔心瀏覽器支援程度。

vite 開發時所使用的套件

工具內部構造、原始碼語法特色

  • 由於不進行再編譯，故透過 WebSocket 的推送進行元件更新。
  • 在模組相依部分，其實還是有做轉譯及編譯的動作。
    • 預設不編譯，可以在 run serve 指令時用 --force option 強迫編譯。
    • optimize 本身有 cache 機制，故可以用 --force 繞過 cache 。

與現行主流工具的差異對比

  • 預設產生的request較多
    • 可以透過升級成 HTTP2 來解決問題。

總結

  • vite 解決什麼問題？
    • vite 用來提高開發體驗
  • vite 只能用在 vue 上面嗎？
    • 不只用在 vue 上面，twitter 的例子也有用在 react 上面。
  • Vue Cli/ webpack 會被vite取代嗎？
    • 不是用來取代，而是增加開發選項
  • vite 可以用在正式專案上嗎？
    • 實驗、小型專案推薦使用
    • 大包、從 webpack轉的不推薦(之前的外掛不能用)

awesome-vite.js 是可參考的專案

聊天區

窩不知道要唸 vite，連主持人都唸錯，窩怎麼可能唸對

辣個瀏覽器，為了你，總是擋在最前面(講者對IE的吐嘲)
Internet Explorer is the best browser to download others with

tags: MOPCON 2020
Select a repo