戏里戏外
Laravel

使用 `deferLoading` 优化 Filament 表格性能

#Laravel #Filament

在处理大型数据集时，Filament 表格的加载性能可能会成为一个问题，本文介绍如何使用 deferLoading 特性来优化表格加载性能。

启用异步加载

首先在对应的资源类，比如 PostResource 类中启用 deferLoading：

use Filament\Tables\Table;

public static function table(Table $table): Table
{
    return $table
        ->deferLoading() // 启用延迟加载
        ->columns([...])
        ->filters([...])
        ->actions([...])
        ->bulkActions([...]);
}
实施以上配置后，带来以下改进
  1. 更快的页面初始加载
    • 页面框架立即显示
    • 数据异步加载，不阻塞页面渲染
  2. 更好的用户体验
    • 提供清晰的加载状态提示
    • 界面响应更加流畅
  3. 更优的服务器负载
    • 请求压力分散
    • 资源使用更合理

测试

在对应的表格测试时需要调用 loadTable() 方法来加载对应资源的数据。

use App\Filament\Resources\PostResource\Pages\ListPosts;

it('can render column', function (string $column) {
    livewire(ListPosts::class)
    ->assertCanNotRenderTableColumn($column)
    ->loadTable() // 加载表格数据
    ->assertCanRenderTableColumn($column);
})->with(['name', 'description']);

注意事项

deferLoading 主要优化初始加载体验，实际数据查询时间不。

对于查询本身性能问题，需要从数据库层面优化。

建议结合实际数据量和用户体验来决定是否启用此特性。