Blaze

Overview Blaze 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 Laravel 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. 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. ```php 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. ```blade @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. ```blade @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 Blade 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 Blaze 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.