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

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

启用异步加载

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

use Filament\Tables\Table;

public static function table(Table $table): Table
{
	return $table
		->deferLoading() // 启用延迟加载
		->columns([...])
		->filters([...])
		->actions([...])
		->bulkActions([...]);
}

实施以上配置后，带来以下改进

更快的页面初始加载
- 页面框架立即显示
- 数据异步加载，不阻塞页面渲染
更好的用户体验
- 提供清晰的加载状态提示
- 界面响应更加流畅
更优的服务器负载
- 请求压力分散
- 资源使用更合理

测试

在对应的表格测试时需要调用 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 主要优化初始加载体验，实际数据查询时间不。

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

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