https://knightli.com/zh-tw/tags/%E5%BB%BA%E6%A7%8B%E5%B7%A5%E5%85%B7/ Recent content in 建構工具 on KnightLi的博客 Hugo -- gohugo.io zh-tw Sat, 06 Jun 2026 22:26:00 +0800 https://knightli.com/zh-tw/2026/06/06/vite-next-generation-frontend-tooling/ Sat, 06 Jun 2026 22:26:00 +0800 https://knightli.com/zh-tw/2026/06/06/vite-next-generation-frontend-tooling/ <p><code>vitejs/vite</code> 是現代前端專案非常常見的建置工具。它的描述很短：Next generation frontend tooling. It&rsquo;s fast! 這句話基本上概括了 Vite 的核心賣點：開發啟動快、熱更新快、配置相對輕。</p> <p>如果你這幾年新建過 Vue、React、Svelte、Solid 或普通 TypeScript 前端項目，很可能已經用過 Vite。</p> <h2 id="為什麼-vite-快">為什麼 Vite 快 </h2><p>Vite 的快主要來自兩個階段的取捨：</p> <ul> <li>開發階段：利用瀏覽器原生 ESM，避免一開始把整個專案打包；</li> <li>生產階段：使用 Rollup 做最佳化建置；</li> <li>依賴預先建置：用更快的工具處理依賴；</li> <li>HMR：模組級熱更新，改哪裡刷新哪裡。</li> </ul> <p>傳統 bundler 往往在專案變大後啟動慢、熱更新慢。 Vite 把開發體驗往「按需載入」方向推了一步。</p> <h2 id="適合哪些項目">適合哪些項目 </h2><p>Vite 適合：</p> <ul> <li>Vue / React / Svelte / Solid 專案；</li> <li>TypeScript 前端應用；</li> <li>元件庫開發；</li> <li>靜態網站和工具頁面；</li> <li>中小型 Web App；</li> <li>需要快啟動和快 HMR 的團隊。</li> </ul> <p>大型專案也可以用，但要注意 monorepo、SSR、插件相容、建置快取和 legacy 瀏覽器支援。</p> <h2 id="使用時要注意什麼">使用時要注意什麼 </h2><p>Vite 預設體驗很好，但不是完全不用配置：</p> <ul> <li>環境變數前綴和注入規則要理解；</li> <li>dev server 代理要配置清楚；</li> <li>alias、路徑、tsconfig 要對齊；</li> <li>SSR 和庫模式要單獨看文件；</li> <li>外掛程式版本和框架版本要匹配；</li> <li>生產建造仍然要看包體積和分包。</li> </ul> <p>不要把「開發快」誤解成「生產建造不用管」。上線前仍然要看效能、快取和相容性。</p> <h2 id="小結">小結 </h2><p>Vite 已成為現代前端預設選項之一。它不是因為概念複雜而流行，而是因為日常開發體驗確實輕快。</p> <p>如果你還在用很老的鷹架，新專案可以優先試 Vite；舊專案遷移則要先評估外掛程式、建置流程和團隊習慣。</p> <h2 id="參考來源">參考來源 </h2><ul> <li><a class="link" href="https://github.com/vitejs/vite" target="_blank" rel="noopener" >vitejs/vite - GitHub</a></li> </ul>