Optimizing Laravel 10 Applications with Vite: A Complete Guide

Optimizing Laravel 10 Applications with Vite: A Complete Guide

What is asset bundling or the vite in laravel 10?

Laravel has always been a go-to framework for PHP developers who want to build quality web applications efficiently. With the release of Laravel 10, incorporating Vite into your Laravel project has never been easier. In this blog, we'll explore the importance of asset bundling and why Vite is such a game-changer for Laravel 10 projects.

Table of Contents

• The Importance of Asset Bundling with Vite in Laravel 10
• Why Vite is So Important in Laravel 10
• Difference Between Mix and Vite
• Installing Requirements
• Installing Vite and The Laravel Plugin
• Setting Up Your Assets
• Understanding vite.config.js
• Workflow and Build Commands
• Loading Your Scripts and Styles
• Troubleshooting
• Processing Static Assets with Vite

The Importance of Asset Bundling with Vite in Laravel 10

Asset bundling is a crucial step that optimizes asset loading and manipulation. This practice is essential for improving website performance by reducing the number of requests made to the server. Vite offers an asset bundling solution that is both faster and more flexible than traditional methods. Unlike older systems that rebuild the entire bundle for every change, Vite only rebuilds the parts that have changed, making the development process incredibly efficient. Additionally, Vite leverages modern JavaScript features like ES modules to enable faster development and better-optimized builds. Its plugin-based architecture makes it highly extensible, allowing you to add more functionalities as needed.

Why Vite is So Important in Laravel 10

Vite offers a more modern approach to asset bundling and development workflows, embracing ES modules and providing faster updates without a full-page reload. Its compatibility with Laravel 10 brings a unified and efficient development environment that makes it easier to build, test, and deploy applications.

Difference Between Mix and Vite

Laravel Mix has been the go-to solution for Laravel projects for asset compilation. Vite, however, offers a more modern, leaner, and faster alternative. While Mix requires a full rebuild for each change, Vite only rebuilds the changed parts, thus speeding up development. Additionally, Vite leverages native ES modules for better final build optimization.

How to Use Vite in Laravel 10

Using Vite in a Laravel 10 project is a straightforward process that begins with ensuring you have the required Node.js and NPM versions installed on your system. Once that's done, you can proceed to install Vite and its Laravel plugin by updating your package.json and running npm install. The next step involves setting up your assets like CSS and JavaScript files and configuring them in your vite.config.js file. This file serves as the control center for Vite, allowing you to specify various settings, plugins, and entry points for your assets. After the setup, you can utilize commands like npm run dev for development and npm run build for production to compile your assets.

Why Vite is So Important in Laravel 10

Vite has rapidly gained popularity for its efficiency in handling asset bundling and transformations, and its integration into Laravel 10 brings about a range of benefits. Vite uses the native ES modules feature in modern browsers, allowing developers to see changes almost instantly during development through its Hot Module Replacement (HMR). This not only speeds up the development process but also enhances the developer experience by a significant margin. Moreover, Vite's optimized build process results in smaller and faster production bundles. All these features make Vite a compelling choice for Laravel 10 projects, promising both speed and optimization.

Installing Requirements

Before diving in, ensure that you have Node.js (version 16 or above) and NPM installed on your system.

node -v
npm -v

Integrating Vite with Laravel Plugins

The package.json file is always in the base directory of a fresh Laravel installation. To set up the frontend dependencies/prerequisites, use the following command:

npm install

Setting Up Your Assets

Place your app.css and app.js files in the resources/css and resources/js directories respectively.

app.css:

@import "../theme/css/bootstrap.min.css";
// ... other imports

app.js:

import '../theme/js/jquery.scrollUp.min.js';
// ... other imports

Understanding vite.config.js

The vite.config.js file serves as the configuration hub for Vite in your Laravel project. In this file, you can specify various settings and plugins that Vite should use. The provided example uses the laravel-vite-plugin and specifies the input array for your CSS and JavaScript files.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Build and Workflow Commands

After configuring your system, you can execute the following commands:

For advancement: 

run npm dev

For production, use 

npx vite build or npm run build

After configuring Vite, you can reference your assets using the @vite() directive in your Blade templates.

<!doctype html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Analyzing issues/Troubleshooting

If npm run build fails, you can use npx vite build instead.

The Vite serves your static assets

To keep track of and update your static files in Blade templates, simply include them in the main JavaScript file of your application using Vite.

import.meta.glob([
    '../theme/img/**/*',
]);

Note: Please remember to always execute the development or build command after making any modifications to your assets.

Conclusion

Vite is a crucial asset bundling solution for Laravel 10 projects, offering a faster and more flexible approach to asset loading and manipulation. It leverages modern JavaScript features like ES modules, enabling faster development and better-optimized builds. Vite's plugin-based architecture makes it highly extensible, allowing developers to add more functionalities as needed. Its compatibility with Laravel 10 brings a unified and efficient development environment, making it easier to build, test, and deploy applications. Vite's configuration hub, vite.config.js, allows for better optimization of static assets and faster development.