Dramatic performance difference between blade component and blade helper

[MaxGiting]

There is a huge speed difference depending on which method you use to include an icon using this package.
The two methods I have checked are:

• Blade Component <x-heroicon-o-arrow-right/>
• Blade Helper @svg('hero icon-o-arrow-up')

Using the "helper method" is on average 10 times faster to render than using the "component method".

The speed differences aren't much when loading a single icon. However on my website I have a page that lists 80 products per page, with each one having 3 icons. Here it makes sense for me to use @svg as the load time quickly adds up.

Why is using @svg so much faster than <x-heroicon-xxxxx/>?

I have created a sample repo so anyone can easily run the tests for themselves.
https://github.com/MaxGiting/blade-ui-performance

To get the sample repo to work you will need to:

• clone repo
• run composer install
• php artisan icons:cache
• artisan serve and visit the homepage

[driesvints]

Hey @MaxGiting, I think you might have missed the caching section here? https://github.com/blade-ui-kit/blade-icons#caching

[MaxGiting]

@driesvints Thanks for the quick reply! I should have mentioned it in the original issue. I have caching turned on and still see the time difference.

[driesvints]

@MaxGiting that's very odd. I'll try out your repo as soon as I find some time.

[MaxGiting]

@driesvints thank you. I have simplified the original issue as caching removed the differences on 1st and subsequent page loads. But yes the difference between blade component and @svg still exists.

[JayBizzle]

Just had a quick look into this.

When using the blade component, most of the time is spent in the following method....
https://github.com/laravel/framework/blob/b9203fca96960ef9cd8860cb4ec99d1279353a8d/src/Illuminate/View/Concerns/ManagesComponents.php#L87-L109

Shared equally between this line...
https://github.com/laravel/framework/blob/b9203fca96960ef9cd8860cb4ec99d1279353a8d/src/Illuminate/View/Concerns/ManagesComponents.php#L97

and. this line....
https://github.com/laravel/framework/blob/b9203fca96960ef9cd8860cb4ec99d1279353a8d/src/Illuminate/View/Concerns/ManagesComponents.php#L104

[driesvints]

I managed to reproduce this with your repo @MaxGiting, thank you. However, I did not figure out the root cause of this even though with @JayBizzle indications.

I have to say, that I find the current differences in speed to not be overly dramatic. I use Blade Icons on several projects, and haven't experienced much slowness after we implemented icon caching. Therefor, I won't be taking any action here right now. However, should anyone find the root cause of this, I'd very much appreciate a PR. Otherwise, if this is really a concern for you, I suggest to use the svg helper or directives for now.

Thanks

[Erulezz]

I experienced the same when using the components. Even with caching, requests where around 130 ms slower with the font awesome icons. Disabled components and switched to the svg helper and the difference was really noticeable.

Am I correct in that when using the svg helper it has no impact on performance? Since blade views are created and cached in production?

Thanks for this package @driesvints 👍

[driesvints]

Am I correct in that when using the svg helper it has no impact on performance? Since blade views are created and cached in production?

Not entirely sure if it's "no impact" but it's far less than components apparently.