資產捆綁是現代 Web 開發的核心部分，有助於優化和管理 CSS、JavaScript 和其他資源。多年來，Laravel Mix 簡化了這個過程，但隨著 JavaScript 工具的發展，Laravel 已經過渡到 Vite 作為 Laravel 11 中的預設。
那麼 Laravel 為什麼要做出這個轉變？
Vite主要關注兩點：開發速度和生產性能。如果您厭倦了等待構建，Vite 的即時回饋會讓您感覺呼吸新鮮空氣。透過熱模組替換（HMR），Vite 的開發伺服器即時交付更改，因此您可以立即看到更新，而無需刷新整個頁面。這種即時回饋創造了更快、更愉快的開發體驗。
Laravel Mix 使用此方法，需要大量的初始捆綁時間，導致伺服器準備就緒之前存在延遲。
這種基於 ESM 的方法的開發速度要快得多，因為它避免了完整的捆綁過程。 Vite 使用這種方法，讓開發者可以立即看到更改，而無需等待完整的捆綁。
（圖片來自Vite官方文件）
對於生產構建，Vite 使用 Rollup 作為其捆綁器，優化和縮小您的程式碼以確保快速效能。這使得 Vite 能夠提供兩全其美的功能：無捆綁開發可提高編碼速度，而傳統捆綁則可優化生產構建。
Vite 也很擅長 tree shake 和 程式碼分割。透過利用 Rollup，Vite 產生最佳化的生產包，剝離未使用的程式碼並根據需要拆分資產。這會產生更小、加載速度更快的包，從而增強應用程式的效能。
Vite 的設定過程非常簡單。與配置可能變得密集和複雜的 Webpack 不同，Vite 的 vite.config.js 檔案易於閱讀和自訂，即使您沒有豐富的捆綁器經驗。
此外，Vite 旨在與 Vue 和 React 等流行框架無縫協作。由於這些框架也受惠於 Vite 的 HMR 和優化的開發環境，您可以更有效率地處理前端繁重的 Laravel 專案。
JavaScript生態正在快速發展，Vite已經站穩了腳步。它得到了廣泛的採用和支持，擁有一個龐大、活躍的社區，帶來了持續的改進和豐富的插件資源。 Vite 的設計非常符合前端開發的發展方向，如果您想讓您的專案面向未來，它是一個明智的選擇。
Laravel 採用 Vite 的決定表明了與現代標準的明確一致性，使您的 Laravel 專案能夠與最新的前端技術保持相容。
Laravel 的 Vite 外掛程式 包含方便的輔助函數，例如用於 Blade 範本的 @vite，自動處理資產版本控制和快取清除。只需使用 @vite('resources/css/app.css')，您就可以連結 CSS 文件，而不必擔心過時的快取問題。
以下是為 Laravel Vue 專案設定 vite.config.js 的方法：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
然後在刀片中：
<!DOCTYPE html>
<html>
<head>
@vite('resources/css/app.css')
</head>
<body>
<h1>Hello, Vite!</h1>
</body>
</html>
Laravel 的官方支援和文件現在專注於 Vite，您將找到一致的指導和資源來幫助您充分利用這個工具。
總而言之，Vite 帶來了現代 Laravel 專案所需的速度、簡單性和麵向未來的功能。透過將 Vite 設為 Laravel 11 中的預設值，Laravel 使開發人員能夠建立更快、更精簡、更有效率的應用程序，特別是隨著 JavaScript 和 Web 開發標準的不斷發展。深入研究 Laravel 的官方文件以獲取更多見解，並立即開始使用 Vite！
以上是Laravel Mix vs Vite：為什麼 Laravel 轉向 Vite的詳細內容。更多資訊請關注PHP中文網其他相關文章！
