拉勒维尔现场直播，渲染性能问题。如何管理数百个组件？

Question

当我多次使用相同的组件时，我在Livewire上有一个性能问题。过去我已经有过这个问题，每次我通过关闭框架并直接使用Vuejs/api来处理这个问题。也许我没有正确使用Livewire ..。或者我在某个地方漏掉了什么东西。

问：如何管理许多具有参数和模型数据的相同组件的Livewire使用，而不影响渲染时间和性能?是否遗漏了什么？有小费吗？

提前谢谢。

发行：

我有一个有数百条条目的网页。对于每个组件，我都调用一个Livewire组件。对于105个组件，页面需要8-11秒才能加载。

我使用了调试器，并发现呈现 livewire函数与应用程序时间(8.46)相比非常消耗(8.29 s)。我审核了内部的函数，只有205.53ms。好的，400毫秒，如果我们采取的一部分，获取数据。

​

​

我在阅读后得出的结论是，根本原因是模型加载的延迟。实际上，我在组件上使用了两个模型(用户和项)：

  <livewire:matrix-power-slider-resume-group :type="$type" :user="$user" :item="$item" aspect="T"></livewire:matrix-power-slider-resume-group>

用户和项当然有一些关系，但是当我调试它们时，关系没有被加载/使用(这意味着我应该有一个稍微序列化的'json‘对象)。所以我不怀疑大懒模型装载的问题。

我试图传递I而不是模型，并要求组件再次获取数据。但是在这里，我爆炸了查询的数量(参数为120个，而ID为+1800 )，而且由于查询的数量，我仍然有非常糟糕的性能(7-11s)。

我在html 代码之前使用了一个调试度量，这是一直在消耗的部分。不是组件的呈现()函数，不是挂载()，而是刀片文件的livewire呈现:(

我还尝试在类中使用模型声明：

  public function mount($type, $userId, $itemId, $aspect = null, User $user = null, item $item = null)

或否：

  public function mount($type, $userId, $itemId, $aspect = null, $user = null, $item = null)

代码：

<?php

namespace App\Http\Livewire;

use App\Models\Matrix\Item;
use App\Models\User;
use Livewire\Component;

class MatrixPowerSliderRange extends Component
{
    public $type;
    public $userId;
    public $user;
    public $itemId;
    public $item;
    public $aspect;

    public $value; // data used into component

    public function mount($type, $userId, $itemId, $aspect = null, User $user = null, Item $item = null)
    {
        $this->type = $type;
        $this->itemId = $itemId;
        $this->item   = $item;

        $this->userId = $userId;
        $this->user   = $user;
        $this->aspect = $aspect;
    }

    public function load()
    {
        // Fetch data if only Ids
        $this->user = is_object($this->user) ? $this->user : (is_numeric($this->userId) ? Job::find($this->userId) : $this->user);
        $this->item = is_object($this->item) ? $this->item : (is_numeric($this->itemId) ? Item::find($this->itemId) : $this->item);

        // Get my data == measure 'MatrixPowerSliderRange.load.returnPower'
        $this->value = $this->user
                ->returnPower($this->item, $this->aspect, $this->kind);
    }

    public function render()
    {
        $return = null;
        $this->load(); // tried to load into render, into mount, ...

        // ==> measure 'MatrixPowerSliderRange.render'
        return view('livewire.matrix-power-slider-range');
    }
}

版本：

• livewire/livewire (v2.4.3)
• Laravel框架8.38.0

Answer 1

首先，您不需要创建一个完整的组件来封装您的逻辑并在每次需要呈现时实例化它。

例如，可以在主组件中实现逻辑，并在传递已编译数据的呈现中使用布局组件。在主组件中，您可以创建一个名为loadRow的函数，并将加载逻辑放在其中，然后在视图上执行如下操作：

<x-matrix-power-slider-range :data="loadRow($row->type, $row->userId, ...)" />

在x-matrix-power-slider-range内部，您只需获取包含信息的数组并使用它。如果要添加类似悬停功能的内容，则可以实现hoverRow()，在这里可以传递标识符并执行逻辑。

为了进一步改进这一点，您还可以在开始时获取所有数据并从loadRow()中的数组中使用这些数据；此外，数据缓存也有帮助。

Answer 2

首先，你不需要在坐骑内传递任何东西。这可能不能完全解决你的问题。但是它将删除一个mount函数调用。你能做到；

public $type,$value,$userId,$itemId,$aspect;
public User $user;
public Item $item;

public function mount()
{
    //Other things
}