Cache Blade Views Into a Single File

[EvilLooney]

Hi,

I have been refactoring some older code and decided to use reusable Blade-X Components as they are much easier to work with and I can save development time for other projects using similar techniques. However, I have hit a wall when dealing with index pages, specifically admin pages displaying lists of models. The time to render the page has jumped significantly (in my case, the response time jumped from less than 200ms to more than 800ms). I have a feeling that I am not the only one who's facing this problem.

Consider this simplified code:

App/Http/Controllers/ProductsController.php

class ProductsController {
    public function index() {
        return view('products.index', ['products' => App\Models\Product::all]);
    }
}

ressources/views/products/index.blade.php

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Brand</th>
        <th></th>
    </tr>
    @each('products.index-row', $products, 'product')
</table>

ressources/views/products/index-row.blade.php

<tr>
    <th>{{ $product->id }}</th>
    <th>{{ $product->name }}</th>
    <th>
        <x-belongs-to :model="$product->brand" />
    </th>
    <th>
        <x-model-view :model="$product" />
        <x-model-edit :model="$product" />
        <x-model-delete :model="$product" />
    </th>
</tr>

ressources/views/components/belongs-to.blade.php

@props('model')
@can('view', $model)
    <a href="{{ $model->view_url }}">{{ $model->name }}</a>
@else
    {{ $model->name }}
@endcan

ressources/views/components/model-view.blade.php

@props('model')
@can('view', $model)
    <a href="{{ $model->view_url }}"><span class="ti-eye"></span></a>
@endcan

ressources/views/components/model-edit.blade.php

@props('model')
@can('update', $model)
    <a href="{{ $model->edit_url }}"><span class="ti-pencil"></span></a>
@endcan

ressources/views/components/model-delete.blade.php

@props('model')
@can('destroy', $model)
    <form action="{{ $model->destroy_url }}" method="POST">
        @csrf
        @method('DELETE')
        <button type="submit"><span class="ti-trash"></span></button>
    </form>
@endcan

Of course, the problem is exasperated when we add more columns, more rows and more components (especially when nested).

Now if we take this code, the render time is significantly reduced:

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Brand</th>
        <th></th>
    </tr>
    @foreach($products as $product)
        <tr>
            <th>{{ $product->id }}</th>
            <th>{{ $product->name }}</th>
            <th>
                @can('view', $product->brand)
                    <a href="{{ $product->brand->view_url }}">{{ $product->brand->name }}</a>
                @else
                    {{ $product->brand->name }}
                @endcan
            </th>
            <th>
                @can('view', $product)
                    <a href="{{ $product->view_url }}"><span class="ti-eye"></span></a>
                @endcan
                @can('update', $product)
                    <a href="{{ $product->edit_url }}"><span class="ti-pencil"></span></a>
                @endcan
                @can('destroy', $product)
                    <form action="{{ $product->destroy_url }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit"><span class="ti-trash"></span></button>
                    </form>
                @endcan
            </th>
        </tr>
    @endforeach
</table>

So my idea is that, instead of caching each individual blade file, wouldn't it make sense to compile the view products.index with all of its child views into one file?

Notes:

• I did not read through every blade compiling classes of the framework so I do not know if this is at all possible, what modifications it would entail, if it would be possible with view composers, etc.
• I am also aware that additional code is inserted when compiling blade views that have an incidence on the render time (such as variable scoping).
• I am unaware if this issue has been discussed or if this type of fix has been attempted before; I couldn't find anything on the web.
• I can speed things up using @includes as this example is not using component slots but a simple test of having @for ($i = 0; $i < 10000; $i++) <div></div> @endfor vs. @for ($i = 0; $i < 10000; $i++) @include('div') @endfor shows how much faster the former is. Plus writing the component syntax simplifies everything.

Sorry for the long post but I tried the best I can to convey my point. I know there is a tradeoff splitting views into separate files vs rendering time but maybe this could make it more bearable.

Thanks!