[Laravel8.x]Bladeテンプレートでコンポーネントがやたらと遅い

Laravel

Laravel9.xが出ているとか、、、まぁそれはそのうちやるとして、Bladeテンプレートにあるコンポーネントを使って部品を共通化していこうとリファクタリングをしていたわけ。

タグエイリアスってやつは便利だし可読性も高いなと思って。たぶん400箇所くらいリファクタしたぐらいで「表示がなんか遅くね?」と。

最初はDBアクセスで遅くなってるんかなぁって思って、DBサーバへ別のツールでアクセスしても普通にレスポンスが返ってくる。

「え!?もしかして、コンポーネントって遅いんじゃね?」

遅い画面はコンポーネントの呼び出しを20個くらいしている。

あーーーもーーーーめんどくせーーーーー!!!!

ということで検証していく。

検証

コンポーネント

https://readouble.com/laravel/8.x/ja/blade.htmlのコンポーネントの作り方に沿ってやってみる。

まずは、コンポーネントの作成

% php artisan make:component Forms/Text1

これで、ファイルが2つ出来上がる。

  • app/View/Components/Forms/Text1.php
  • resources/views/components/forms/text1.blade.php

両方ともファイルは変更しない。

このパッケージを手動登録するため、サービスプロバイダ(私の場合は、「app/Providers/AppServiceProvider.php」に書く。

use Illuminate\Support\Facades\Blade;
use App\View\Components\Forms\Text1;

class AppServiceProvider extends ServiceProvider
{
	public function boot()
	{
		Blade::component('text1', Text1::class);
	}
}

性能測定用のビューに以下のコードを書く

<?php $beginTime = microtime(true); logger('20こ begin'); ?>
@for ($i = 0; $i < 20; $i++)
	<x-text1 />
@endfor
<?php logger('20こ end ' . (microtime(true) - $beginTime) . '秒'); ?>

実行してみる

  • 1回目:1.9641230106354秒
  • 2回目:1.870274066925秒
  • 3回目:1.9684851169586秒

匿名コンポーネント

通常のコンポーネントと違い、直接「resources/views/components/forms/text1.blade.php」を呼び出すことができるのでコード量が削減できる。

ただ、ビューからの呼び出し方が若干変わる。x-text1をx-forms.text1に変更する。

<?php $beginTime = microtime(true); logger('20こ begin'); ?>
@for ($i = 0; $i < 20; $i++)
	<x-forms.text1 />
@endfor
<?php logger('20こ end ' . (microtime(true) - $beginTime) . '秒'); ?>

実行してみる。

  • 1回目:1.7248449325562秒
  • 2回目:3.8015789985657秒
  • 3回目:1.8599450588226秒

インクルード(@includeディレクティブ)で検証

ビューからの呼び出しは、以下。

<?php $beginTime = microtime(true); logger('20こ begin'); ?>
@for ($i = 0; $i < 20; $i++)
	@include('components.forms.text1')
@endfor
<?php logger('20こ end ' . (microtime(true) - $beginTime) . '秒'); ?>

実行してみる。

  • 1回目:0.0022399425506592秒
  • 2回目:0.002856969833374秒
  • 3回目:0.0023419857025146秒

まとめ

コンポーネントは可読性も高く仕組みもすごくいいとは思う。だけど性能が悪ければ使えないので、とりあえずは、@includeディレクティブでやるのが良いかなと思う。

あーーーー400箇所書き換えかぁ、、、

コメント

タイトルとURLをコピーしました