Delay when opening the first page for the first time

[erycson]

Vite Plugin Version

v1.0.1

Laravel Version

v10.24.0

Node Version

v21.5.0

NPM Version

10.2.4

Operating System

Windows (WSL)

OS Version

11

Web browser and version

Google Chrome Version 120.0.6099.227 (Official build) 64 bits

Running in Sail?

No

Description

I'm sorry for opening it again, but they closed the other issue without the case being resolved. So I had to reopen here again.

Vite runs outside of Docker, the entire project is outside of Docker, I only use Docker to run PHP and MySQL.

I develop using Laravel which runs on Docker, but runs Vite outside of Docker, what is happening is that, when opening the website for the first time (any page), there is a huge delay (up to 10 minutes) for me to receive the assets from the "yarn dev" server. This is getting worse every day, because I've always done it this way but now I practically have to run "yarn dev" and go out and do something. Remembering that the Vite server runs quickly. The project is not big, it has around 50 assets (JS, CSS and images)

Some images to demonstrate what I'm talking about

Time to start Vite

Time for Vite to respond to requests in the browser

It's not just SASS that is slow, all images and javascripts are slow

Steps To Reproduce

I don't know what is causing the slowdown, so I don't yet know how to replicate the problem

[erycson]

My package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "@alpinejs/mask": "^3.13.0",
        "@alpinejs/persist": "^3.13.0",
        "@meilisearch/instant-meilisearch": "^0.15.0",
        "@popperjs/core": "^2.11.6",
        "@preact/preset-vite": "^2.8.1",
        "alpinejs": "^3.12.3",
        "axios": "^0.27",
        "bootstrap": "^5.3.1",
        "boxicons": "^2.1.2",
        "chokidar": "^3.5.3",
        "classnames": "^2.3.2",
        "datatables.net": "^1.13.5",
        "datatables.net-bs5": "^1.13.5",
        "datatables.net-dt": "^1.13.5",
        "datatables.net-responsive-bs5": "^2.5.0",
        "dayjs": "^1.11.7",
        "jquery": "^3.6.1",
        "js-cookie": "^3.0.5",
        "laravel-vite-plugin": "^1.0.1",
        "localtunnel": "^2.0.2",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "preact": "^10.11.0",
        "qs": "^6.11.0",
        "react-bootstrap": "^2.7.0",
        "react-currency-format": "^1.1.0",
        "react-input-mask": "^2.0.4",
        "react-instantsearch": "^7.5.3",
        "react-select": "^5.4.0",
        "rsuite": "^5.28.0",
        "sass": "^1.54.9",
        "swiper": "^8.4.2",
        "tinymce": "^6.3.1",
        "vite": "^5.0.12",
        "vite-plugin-compression": "^0.5.1",
        "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz"
    },
    "dependencies": {
        "laravel-echo": "^1.15.3",
        "pusher-js": "^8.3.0"
    }
}

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import preact from "@preact/preset-vite";
import viteCompression from "vite-plugin-compression";

export default defineConfig({
    build: {
        assetsInlineLimit: 0,
        minify: true,
    },
    plugins: [
        preact({ devtoolsInProd: true }),
        laravel({
            input: [
                "resources/css/admin/global.scss",
                "resources/js/admin/global.js",
                "resources/js/admin/pecas/editar.jsx",
                "resources/js/admin/modelos/editar.jsx",
                "resources/js/admin/usuarios/editar.jsx",
                "resources/js/admin/avisos/editar.jsx",
                "resources/js/admin/fornecedores/editar.jsx",
                "resources/js/admin/agrupamentos/editar.jsx",
                "resources/js/admin/administracao/ceps/editar.jsx",
                "resources/js/admin/financeiro/assinaturas/editar.jsx",

                "resources/css/painel/global.scss",
                "resources/js/painel/global.js",
                "resources/js/painel/conta/empresa.jsx",
                "resources/js/painel/lotes/editar.jsx",
                "resources/js/painel/pecas/editar.jsx",
                "resources/js/painel/importar/index.jsx",
                "resources/js/painel/responsavel/editar.jsx",
                "resources/js/painel/avisos/index.jsx",
                "resources/js/painel/solicitacoes/index.jsx",
                "resources/js/painel/relatorios/index.jsx",

                "resources/css/website/global.scss",
                "resources/js/website/global.js",
                "resources/js/website/home/index.jsx",
                "resources/js/website/lotes/index.jsx",
                "resources/js/website/pecas/index.jsx",
                "resources/js/website/pecas/view.jsx",
                "resources/js/website/oficinas/index.jsx",
                "resources/js/website/fornecedores/view.jsx",
                "resources/js/website/fornecedores/index.jsx",
            ],
            buildDirectory: "build",
            refresh: true,
        }),
        viteCompression(),
    ],
});

22 seconds to load a simple image on the first request with "vite-plugin-compression"

Requests without "vite-plugin-compression"

Requests without "vite-plugin-compression" and "laravel-vite-plugin"

[timacdonald]

@erycson Can you please create a brand new Laravel project to see if the problem exists:

composer create-project laravel/laravel vite-test
cd vite-test
npm install
npm run dev

Once you have done that open the JS file in the browser via http://localhost:5173/resources/js/app.js.

How are the speeds then?

[timacdonald]

I also see that you are using WSL2 on Windows. If the project is in the Windows filesystem it is expected that it will be slow. They recommend moving the files out of the Windows filesystem. Full disclosure: I don't use Windows and I don't actually know what that involves, but it is something I would be trying as it seems like it could be an issue for you.

[erycson]

After stopping using Docker, that is, using php artisan serve + yarn dev on my machine, the system took around 4 minutes to open for the first time, and again, all subsequent requests remained fast. I tried to copy the assets to a new project to see if they were slow, but it worked normally, without any slowdowns.

php artisan serve + yarn dev:

[timacdonald]

Are your project files located in the Windows filesystem?

Did you test out on a brand new project using the steps in #283 (comment)?

[erycson]

Yes, I ran the project 100% using only Windows, without using Docker and it was still slow. When I created a new project and copied the files to it, I didn't experience any slowdowns. In fact, when creating a new project, I felt a small slowdown of 10 seconds on average in SASS, but then it no longer appeared.

[timacdonald]

So it seems that the slowdown is specifically related to your application, as you do not see the slowdown on a fresh application?

[erycson]

But how could I DEBUG this specific slowness? Do you have any suggestion?

[jessarcher]

Have you tried deleting the node_modules directory and re-installing dependencies?

Otherwise, I would try either:

• Incrementally add JS-related config, plugins, source code, assets, etc., from your problematic application to the fresh application until you can replicate the issue and determine what change introduced the issue.
• Incrementally remove things from your problematic application until the issue disappears to determine which change fixed the issue.

[timacdonald]

Gonna close this one out as it seems like an application or 3rd party code issue.

You may also want to try Vite's built in profiling tooling: https://vitejs.dev/guide/performance.html#audit-configured-vite-plugins

Hope you can get to the bottom of it.

[erycson]

I resolved the slowdown issue after including the project folder in the Windows Defender excluded folder

[timacdonald]

Glad to hear you got this sorted and thanks for following up for others that might run into this issue.