建置與工具

打包工具(bundler)

打包工具(bundler)會把你那一大堆原始檔——JavaScript、CSS、圖片,以及它們引入的各種套件——拼接成幾個又小又優化的檔案,讓瀏覽器能快速下載並執行。你把程式碼拆在幾十個清爽的小檔案裡寫,打包工具則把它們打包好、準備上路。

它一路上還會順手收拾:刪掉沒用到的程式碼、壓縮檔案體積、把較新的語法翻譯成舊瀏覽器也能看懂的寫法。結果是下載次數大大減少,頁面載入更快。

如今常見的有 Vite、webpack 和 esbuild。你多半是透過一個「建置(build)」步驟接觸到打包工具——它把你易讀的專案,變成真正發布出去的那份精簡包。

$ npx vite build
dist/assets/index-4f9a.js   142 kB │ gzip: 46 kB

幾十個原始檔變成了一個又小又優化的包。

它的誕生,是因為瀏覽器並非總能高效地載入大量小模組。

又稱
vitewebpackesbuildrollupbuild tool