Перейти к содержанию

Атрибут Lazy⚓︎

Атрибут #[Lazy] заставляет компонент загружаться только тогда, когда он становится видимым в области просмотра, предотвращая блокировку первоначального рендеринга страницы медленными компонентами.

Базовое использование⚓︎

Примените атрибут #[Lazy] к любому компоненту, который должен загружаться лениво:

resources/views/components/⚡revenue.blade.php
<?php

use Livewire\Attributes\Lazy;
use Livewire\Component;
use App\Models\Transaction;

new #[Lazy] class extends Component {
    public $amount;

    public function mount()
    {
        // Медленный запрос к базе данных...
        $this->amount = Transaction::monthToDate()->sum('amount');
    }
};
?>

<div>
    Доход за этот месяц: {{ $amount }}
</div>

С атрибутом #[Lazy] компонент изначально рендерится как пустой <div></div>, а затем загружается, когда он входит в область просмотра — обычно когда пользователь прокручивает страницу до него.

Сравнение Lazy и Defer⚓︎

Livewire предоставляет два способа отложенной загрузки компонентов:

  • Ленивая загрузка (#[Lazy]) — компоненты загружаются, когда они становятся видимыми в области просмотра (когда пользователь доскроллил до них).
  • Отложенная загрузка (#[Defer]) — компоненты загружаются сразу после завершения первоначальной загрузки страницы.

Используйте ленивую загрузку для компонентов, находящихся «ниже сгиба», до которых пользователь может и не докрутить. Используйте #[Defer] для компонентов, которые всегда видны, но вы хотите загрузить их после рендеринга основной части страницы.

Рендеринг заглушек⚓︎

По умолчанию Livewire рендерит пустой <div></div> до загрузки компонента. Вы можете предоставить пользовательскую заглушку, используя метод placeholder():

resources/views/components/⚡revenue.blade.php
<?php

use Livewire\Attributes\Lazy;
use Livewire\Component;
use App\Models\Transaction;

new #[Lazy] class extends Component {
    public $amount;

    public function mount()
    {
        $this->amount = Transaction::monthToDate()->sum('amount');
    }

    public function placeholder()
    {
        return <<<'HTML'
        <div>
            <div class="animate-pulse bg-gray-200 h-20 rounded"></div>
        </div>
        HTML;
    }
};
?>

<div>
    Доход за этот месяц: {{ $amount }}
</div>

Пользователи будут видеть скелетную анимацию до тех пор, пока компонент не войдет в область просмотра и не загрузится.

Соответствие типа корневого элемента плейсхолдера

Если корневым элементом вашего плейсхолдера является <div>, ваш компонент также должен использовать элемент <div> в качестве корневого.

Группировка запросов⚓︎

По умолчанию ленивые компоненты загружаются параллельно отдельными сетевыми запросами. Чтобы сгруппировать несколько ленивых компонентов в один запрос, используйте параметр bundle:

resources/views/components/⚡revenue.blade.php
<?php

use Livewire\Attributes\Lazy;
use Livewire\Component;

new #[Lazy(bundle: true)] class extends Component {
    // ...
};

Теперь, если на странице десять компонентов revenue, все десять загрузятся через один сгруппированный сетевой запрос вместо десяти параллельных.

Альтернативный подход⚓︎

Использование параметра lazy⚓︎

Вместо атрибута вы можете включить ленивую загрузку для конкретных экземпляров компонента, используя параметр lazy:

<livewire:revenue lazy />

Это полезно, когда вам нужно, чтобы только определенные экземпляры компонента загружались лениво.

Переопределение атрибута⚓︎

Если компонент помечен #[Lazy], но в некоторых случаях вы хотите загрузить его немедленно, вы можете переопределить это поведение:

<livewire:revenue :lazy="false" />

Когда использовать⚓︎

Используйте #[Lazy], когда:

  • Компоненты содержат медленные операции (запросы к БД, вызовы API), которые задерживают загрузку страницы.
  • Компонент находится в нижней части страницы, и пользователи могут до него не докрутить.
  • Вы хотите улучшить воспринимаемую производительность, показывая страницу быстрее.
  • На одной странице находится несколько «тяжелых» компонентов.

Узнать больше⚓︎

Полную документацию по ленивой загрузке, включая плейсхолдеры, стратегии группировки и передачу пропсов, см. в документации по ленивой загрузке.

Справочник⚓︎

<?php

#[Lazy(
    bool|null $bundle = null,
)]
Параметр Тип По умолчанию Описание
$bundle bool\|null null Группировка нескольких ленивых компонентов в один сетевой запрос