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