Lazy

#[Lazy] 属性使组件仅在视口中可见时加载，防止慢速组件阻塞初始页面渲染。

基本用法

将 #[Lazy] 属性应用到任何应该延迟加载的组件上：

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

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

#[Lazy] // [tl! highlight]
new 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]） - 组件在初始页面加载完成后立即加载

对首屏之下用户可能不会滚动到的组件使用延迟加载。对始终可见但您希望在页面渲染后加载的组件使用推迟加载。

渲染占位符

默认情况下，Livewire 在组件加载前渲染一个空的 <div></div>。您可以使用 placeholder() 方法提供自定义占位符：

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

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

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

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

    public function placeholder() // [tl! highlight:start]
    {
        return <<<'HTML'
        <div>
            <div class="animate-pulse bg-gray-200 h-20 rounded"></div>
        </div>
        HTML;
    } // [tl! highlight:end]
};
?>

<div>
    本月收入：{{ $amount }}
</div>

用户将看到骨架占位符，直到组件进入视口并加载。

匹配占位符元素类型

如果占位符的根元素是 <div>，您的组件也必须使用 <div> 元素。

捆绑请求

默认情况下，延迟组件通过独立的网络请求并行加载。要将多个延迟组件捆绑到单个请求中，请使用 bundle 参数：

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

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

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

现在，如果页面上有十个 revenue 组件，所有十个都将通过单个捆绑网络请求加载，而不是十个并行请求。

隔离

延迟组件默认是隔离的，这意味着它们的请求不会与其他组件更新捆绑。这允许它们并行加载而不会互相阻塞。

如果您想禁用隔离（强制与其他更新捆绑），可以使用：

#[Lazy(isolate: false)] // [tl! highlight]

替代方法

使用 lazy 参数

除了使用属性外，您还可以使用 lazy 参数延迟加载特定组件实例：

<livewire:revenue lazy />

当您只想延迟加载组件的某些实例时，这很有用。

覆盖属性

如果组件有 #[Lazy] 但您想在某些情况下立即加载它，您可以覆盖它：

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

何时使用

在以下情况下使用 #[Lazy]：

• 组件包含会延迟页面加载的慢速操作（数据库查询、API 调用）
• 组件在首屏之下，用户可能不会滚动到它
• 您想通过更快地显示页面来提高感知性能
• 单个页面上有多个昂贵的组件

了解更多

有关延迟加载的完整文档，包括占位符、捆绑策略和传递属性，请参阅延迟加载文档。