跳至主要内容

[note] Vite

TL;DR

$ npx vite --help

# 建立 vite 專案
$ npm create vite@latest # 等同於 npm exec create-vite@latest

# 等同於 npm exec create-vite@latest react-ts-vite --template react-ts
$ npm create vite@latest react-ts-vite -- --template react-ts

Cache

caching @ Vite > Dependency Pre-Bundling

File System Cache

Vite 預設會 cache 所有 pre-bundled 的套件到 node_modules/.vite 中,只有在下述檔案有變化時,才會重新執行 pre-build:

  • package.json 中的 dependencies 有改變
  • package-lock.jsonyarn.lock 這類檔案有改變
  • vite.config.js 中的相關欄位有變更

如果因為某些原因需要讓 vite 重新 bundle 這些 dependencies 的話,可以:

  • 在啟動專案時加上 --force
  • 或手動刪除 node_modules/.vite

Browser Cache

Vite 會透過 HTTP headers max-age 來促使瀏覽器做到 cache 的動作。有些情況下,如果你需要直接改 dependencies 的程式碼來 debug,你可以:

  • 在瀏覽器 Network 面板勾起 "disable cache"
  • 在啟動專案時加上 --force
  • 重新整理該頁面

Giscus