Accelerating Laravel Applications with Livewire Blaze

Overview

acts as a high-performance alternative for compiling
Blade
components within
Laravel
and
Livewire
projects. Developed by
Caleb Porzio
, this tool targets applications heavily reliant on repetitive UI elements—such as complex dashboards or dense data grids. By bypassing the standard rendering pipeline for designated components, it significantly reduces the execution time required to generate HTML, resulting in a snappier user experience.

Prerequisites

To implement this technique, you should have a solid grasp of the

framework and its
Blade
templating engine. Familiarity with anonymous components and
Livewire
is essential, as the performance gains are most visible in component-heavy environments.

Accelerating Laravel Applications with Livewire Blaze
I Tried New Livewire Blaze for Blade Components (1.5x Faster?)

Key Libraries & Tools

  • Blaze: The core package that optimizes component compilation.
  • Laravel Blade: The underlying templating engine being optimized.
  • Blaze Debugger: A built-in profiling tool to visualize render times and bottlenecks.

Code Walkthrough

Enabling Blaze Globally

You can activate the optimization for specific directories within your AppServiceProvider.php. This tells the engine to apply specialized compilation to all components in that path.

public function boot(): void
{
    // Optimize all components in the 'ui' folder
    Blaze::optimize('components/ui');

    // Enable the visual debugger for local development
    Blaze::debug();
}

Targeting Specific Components

For granular control, use the @blaze directive at the top of an individual component file. This allows you to opt-in to performance gains only where they are needed.

@blaze

<div class="task-row">
    {{ $title }}
</div>

Memoization Strategy

For components like icons that appear hundreds of times with the same properties, the memo strategy provides a runtime cache.

@blaze(['memo' => true])

<svg><!-- Icon Path --></svg>

Syntax Notes

Blaze introduces the @blaze directive which can accept an array of options such as ['memo' => true] or ['fold' => true]. These directives must be placed at the very top of your .blade.php file to ensure the compiler handles them correctly before processing other HTML or Blade logic.

Practical Examples

In a dashboard displaying 1,000 tasks, each task might contain multiple sub-components like status badges, user avatars, and action icons. Standard

might take ~80ms to process this loop. By implementing
Blaze
on the task-row and icon components, you can slash render times down to ~35ms, effectively a 1.5x speed increase.

Tips & Gotchas

Always run php artisan view:clear after toggling

settings in your environment file; otherwise,
Laravel
will continue serving the old, unoptimized cached views. Note that class-based components and components utilizing slots are currently unsupported by the more aggressive optimization strategies. Stick to anonymous components for the best results.

3 min read