0

He introducido "livewirestyles" en la sección de encabezado (header) y "livewirescripts" debajo de la etiqueta de cierre del cuerpo (closing body tag), y al insertar los scripts noté un cambio en los tiempos de carga cada vez que se refresca la página. El componente se está utilizando en "layouts/app", que se extiende a lo largo de la mayoría del sitio.

La manera en que obtuve Livewire fue a través de la instalación de FilamentPhp, ya la trae y eso me ha dejado utilizarlo aunque no estoy familiarizado si existe algun problema con esto. Agradecería sus comentarios.

En cuanto al nombre de "livewirescript" en la pestaña de red (network tab), no estoy familiarizado con él, pero encontré esto con el nombre de "http://localhost/livewire/livewire.js?id=90730a3b0e7144480175":

En cola: 284 ms
Inicio: 284 ms
Descargado: 284 ms

Esto es lo que dice la parte inferior de la pestaña "Ctrl + i" en la respuesta de la página después de introducir "livewirescripts":

15 solicitudes
3.38 kB / 411 B transferidos
Finalización: 4.95 min
DOMContentLoaded: 1.47 s
Carga: 3 s

(usualmente 1 o 2 s)

Entonces, aparentemente la solicitud #15 hace que la página sea lenta, ¿por qué y cómo?

Este es el componente, UpvoteDownvote de Livewire:

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;;
use App\Models\UpvoteDownvote as AppUpvoteDownvote;

class UpvoteDownvote extends Component
{
    public Post $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }
    
    public function render()
    {
        $upvotes = AppUpvoteDownvote::where('post_id', '=', $this->post->id)
            ->where('is_upvote', '=', true)
            ->count();

        $downvotes = AppUpvoteDownvote::where('post_id', '=', $this->post->id)
            ->where('is_upvote', '=', false)
            ->count();

        // El estado de si el usuario actual ha votado positivamente por la publicación o no
        // Esto será null, true o false
        // null significa que el usuario ha votado positiva o negativamente
        $hasUpvote = null;

        /** @var \App\Models\User $user */
        $user = request()->user();

        if($user) {
            $upvoteDownvote = AppUpvoteDownvote::where('post_id', '=', $this->post->id)
                ->where('user_id', '=', $user->id)
                ->first();
            if($upvoteDownvote) {
                $hasUpvote = !!$upvoteDownvote->is_upvote;
            }
        }
        
        return view('livewire.upvote-downvote', compact('upvotes', 'downvotes', 'hasUpvote'));
    }

    public function upvoteDownvote($upvote = true)
    {
        /** @var \App\Models\User $user */
        $user = request()->user();

        if(!$user) {
            return $this->redirect('login');
        }

        if (!$user->hasVerifiedEmail()) {
            return $this->redirect(route('verification.notice'));
        }

        $upvoteDownvote = AppUpvoteDownvote::where('post_id', '=', $this->post->id)
            ->where('user_id', '=', $user->id)
            ->first();

        if(!$upvoteDownvote) {
            AppUpvoteDownvote::create([
                'is_upvote' => $upvote,
                'post_id' => $this->post->id,
                'user_id' => $user->id
            ]);
            
            return;
        }

        if ($upvote && $upvoteDownvote->is_upvote || !$upvote && !$upvoteDownvote->is_upvote) {
            $upvoteDownvote->delete();
        } else {
            $upvoteDownvote->is_upvote = $upvote;
            $upvoteDownvote->save();
        }

    }
}

PostsController.php

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use App\Models\Category;
use App\Models\PostView;
use Illuminate\Http\Request;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\DB;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

class PostController extends Controller
{
    /**
     * Muestra una lista de los recursos.
     */
    public function home()
    {
        // Muestra la última publicación creada
        $latestPost = Post::where('active', '=', 1)
            ->where('published_at', '<', Carbon::now())
            ->orderBy('published_at', 'desc')
            ->with('categories')
            ->limit(1)
            ->first();

        // Muestra las 3 publicaciones más populares
        $popularPosts = Post::query()
            ->leftJoin('upvote_downvotes', 'post_id', '=', 'upvote_downvotes.post_id')
            ->select('posts.*', DB::raw('COUNT(upvote_downvotes.id) as upvote_count'))
            ->where(function($query) {
                $query->whereNull('upvote_downvotes.is_upvote')
                    ->orWhere('upvote_downvotes.is_upvote', '=', 1);
            })
            ->where('active', '=', 1)
            ->where('published_at', '<', Carbon::now())
            ->orderByDesc('upvote_count')
            ->groupBy('posts.id')
            ->limit(5)
            ->get();

        // Muestra las categorías recientes con las últimas publicaciones
        $categories = Category::query()
            // ->with(['posts' => function ($query) {
            //     $query->orderByDesc('published_at')->limit(3);
            // }])
            ->whereHas('posts', function($query) {
                $query->where('active', '=', 1)
                      ->where('published_at', '<', Carbon::now());
            })
            ->select('categories.*')
            ->selectRaw('MAX(posts.published_at) as max_date')
            ->leftJoin('category_post', 'categories.id', '=', 'category_post.category_id')
            ->leftJoin('posts', 'posts.id', '=', 'category_post.post_id')
            ->orderByDesc('max_date')
            ->groupBy('categories.id')
            ->limit(2)
            ->get();
        
        // Si está autorizado, muestra publicaciones recomendadas según los votos positivos del usuario
        $user = auth()->user();

        if ($user) {
            $leftJoin = "(SELECT cp.category_id, cp.post_id FROM upvote_downvotes
                        JOIN category_post cp ON upvote_downvotes.post_id = cp.post_id
                        WHERE upvote_downvotes.is_upvote = 1 and upvote_downvotes.user_id = ?) as t";
            $recommendedPosts = Post::query()
                ->leftJoin('category_post as cp', 'posts.id', '=', 'cp.post_id')
                ->leftJoin(DB::raw($leftJoin), function ($join) {
                    $join->on('t.category_id', '=', 'cp.category_id')
                         ->on('t.post_id', '!=', 'cp.post_id');
                        })
                ->select('posts.*')
                ->where('posts.id', '!=', DB::raw('t.post_id'))
                ->setBindings([$user->id])
                ->limit(2)
                ->get();
        // No autorizado = publicaciones populares según las vistas
        } else {
            $recommendedPosts = Post::query()
                ->leftJoin('post_views', 'posts.id', '=', 'post_views.post_id')
                ->select('posts.*', DB::raw('COUNT(post_views.id) as view_count'))
                ->where('active', '=', 1)
                ->where('published_at', '<', Carbon::now())
                ->groupBy('posts.id')
                ->limit(2)
                ->get();
        }

        return view('home', compact(
            'latestPost', 
            'popularPosts', 
            'recommendedPosts', 
            'categories'
        ));
    }

    /**
     * Muestra el recurso especificado.
     */
    public function show(Post $post, Request $request)
    {
        if (!$post->active || $post->published_at > Carbon::now()) {
            throw new NotFoundHttpException();
        }
      
        $next = Post::query()
            ->where('active', true)
            ->where('published_at', '<=', Carbon::now())
            ->whereDate('published_at', '<', $post->published_at)
            ->orderBy('published_at', 'desc')
            ->limit(1)
            ->first();

        $prev = Post::query()
            ->where('active', true)
            ->where('published_at', '<=', Carbon::now())
            ->whereDate('published_at', '>', $post->published_at)
            ->orderBy('published_at', 'asc')
            ->limit(1)
            ->first();
        
        $user = $request->user();

        PostView::create([
            'ip_address' => $request->ip(),
            'user_agent' => $request->userAgent(),
            'post_id' => $post->id,
            'user_id' => $user?->id
        ]);

        return view('post.view', compact('post', 'prev', 'next'));
    }

    public function byCategory(Category $category)
    {
        $categories = Category::query();

        $posts = Post::query()
            ->join('category_post', 'posts.id', '=', 'category_post.post_id')
            ->where('category_post.category_id', '=', $category->id)
            ->where('active', '=', true)
            ->whereDate('published_at', '<=', Carbon::now())
            ->orderBy('published_at', 'desc')
            ->paginate(10);

            return view('categories', compact('posts', 'categories', 'category'));
    }
}

Cuando agrego la etiqueta, se produce un bucle de errores durante un tiempo hasta que se detiene. Puedo ver esto a través de la pestaña de la red en Firefox. Agregué un punto de interrupción y este fue el resultado: https://imgur.com/kjh4AOn Parece ser el código de Alpine o Livewire. Lo grabé en video aquí: https://www.veed.io/view/14d137c3-7c90-44e9-be71-5b3f984e44db?sharingWidget=true&panel=share Cuando elimino la etiqueta, la página carga correctamente. No me explico porqué o como ni de donde proviene este error.

1 respuesta 1

0

Ya encontré la solución, resulta que estaba cargando AlpineJS 2 veces, una por una CDN y la otra por el archivo en resources/js/app.js. Al quitar la CDN y quedarme con esta línea:

  @vite(['resources/css/app.css', 'resources/js/app.js'])

La página cargo mucho mejor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.