资产捆绑是现代 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中文网其他相关文章！
