search

invictus-codes / nuxt-vuetify

Add Vuetify 3 to your Nuxt application in seconds.
MIT License
73 stars 9 forks source link

[Bug]: Page load freeze and is very slow when Web Developer tools are opened #26

Open rrolla opened 8 months ago

rrolla commented 8 months ago

Contact Details

No response

What happened?

If you open Web Developer Tools (F12 or ctrl+shift+i) while developing nuxt with vuetify and try to reload (F5 or ctrl+shift+r), nuxt very often freezes entirely and the CPU fans start spinning really fast.

Here is the regular load below 1 second

https://github.com/invictus-codes/nuxt-vuetify/assets/3932546/a9828796-4878-4cb6-a1d1-449520e68126

And here is with huge freeze (look on browser tab loading icon) for about 1 minute browser freezes and that tab is totally unresponsive

https://github.com/invictus-codes/nuxt-vuetify/assets/3932546/5d34d42b-9f3f-4e8c-9288-efce8499a3cd

I was trying to turn off browser extensions, but no fundamental changes for freezing

Once looks that Vue Devtools extension was root cause, but that was false alarm, and it just randomly freezes.

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Additional context

Host

lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.3 LTS
Release:    22.04
Codename:   jammy

Docker version

docker -v
Docker version 24.0.5, build 24.0.5-0ubuntu1~22.04.1
docker-compose -v
docker-compose version 1.29.2, build 5becea4c

Container is running on node:18-alpine and

Network configuration

traefik (ssl) -> docker

Nuxt vuetify version

"@invictus.codes/nuxt-vuetify@^0.3":
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/@invictus.codes/nuxt-vuetify/-/nuxt-vuetify-0.3.0.tgz#f473081a90464fff177cce99b3311b6a2bd414a9"
  integrity sha512-Rc2fIzq4CFUlmUHudQBBjyy+yVTlZeevsqh4cuGqPcIdUNWYJRrWFHl5bsp/lfNS5iDYElSBxefWJOD4wFc4gA==
  dependencies:
    "@nuxt/kit" "^3.6.2"
    defu "^6.1.2"
    vite-plugin-vuetify "^1.0.2"
    vuetify "^3.3.7"

Nuxt version

nuxt@^3.7.1:
  version "3.7.1"
  resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.7.1.tgz#a747b9f6dd61618ac35a9d939483c9895a528a46"
  integrity sha512-y8so6b11dDnuOkjqls3WZToyKODmHFaEYVB/RitjMrkNCez68qGDBFtG+VLaO34I2IdsbugTzByXktEk4dbs9w==
  dependencies:
    "@nuxt/devalue" "^2.0.2"
    "@nuxt/kit" "3.7.1"
    "@nuxt/schema" "3.7.1"
    "@nuxt/telemetry" "^2.4.1"
    "@nuxt/ui-templates" "^1.3.1"
    "@nuxt/vite-builder" "3.7.1"
    "@unhead/dom" "^1.5.2"
    "@unhead/ssr" "^1.5.2"
    "@unhead/vue" "^1.5.2"
    "@vue/shared" "^3.3.4"
    acorn "8.10.0"
    c12 "^1.4.2"
    chokidar "^3.5.3"
    cookie-es "^1.0.0"
    defu "^6.1.2"
    destr "^2.0.1"
    devalue "^4.3.2"
    esbuild "^0.19.2"
    escape-string-regexp "^5.0.0"
    estree-walker "^3.0.3"
    fs-extra "^11.1.1"
    globby "^13.2.2"
    h3 "^1.8.1"
    hookable "^5.5.3"
    jiti "^1.19.3"
    klona "^2.0.6"
    knitwork "^1.0.0"
    magic-string "^0.30.3"
    mlly "^1.4.2"
    nitropack "^2.6.2"
    nuxi "^3.7.3"
    nypm "^0.3.2"
    ofetch "^1.3.3"
    ohash "^1.1.3"
    pathe "^1.1.1"
    perfect-debounce "^1.0.0"
    pkg-types "^1.0.3"
    prompts "^2.4.2"
    scule "^1.0.0"
    std-env "^3.4.3"
    strip-literal "^1.3.0"
    ufo "^1.3.0"
    ultrahtml "^1.4.0"
    uncrypto "^0.1.3"
    unctx "^2.3.1"
    unenv "^1.7.4"
    unimport "^3.3.0"
    unplugin "^1.4.0"
    unplugin-vue-router "^0.6.4"
    untyped "^1.4.0"
    vue "^3.3.4"
    vue-bundle-renderer "^2.0.0"
    vue-devtools-stub "^0.1.0"
    vue-router "^4.2.4"

nuxt.config.ts

export default defineNuxtConfig({
  ssr: true,
  devtools: { enabled: true },

  experimental: {
    inlineSSRStyles: false,
    treeshakeClientOnly: false,
  },

  app: {
    head: {
      titleTemplate: '%s - gradio.lv',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    },
    pageTransition: { name: 'fade', mode: 'out-in' },
    layoutTransition: { name: 'slide', mode: 'out-in' },
  },

  pages: true,

  imports: {
    autoImport: true,
  },

  css: [
    '@mdi/font/css/materialdesignicons.min.css',
    'assets/globalStyles.scss',
  ],

  vite: {
    define: { 'process.env.DEBUG': false },
    server: {
      hmr: {
        protocol: 'wss',
        port: 22300,
        clientPort: 443,
        path: 'hmr/',
        timeout: 3,
      },
    },
  },

  modules: [
    '@pinia/nuxt',
    '@vueuse/nuxt',
    '@invictus.codes/nuxt-vuetify',
    '@nuxt/devtools',
  ],

  vuetify: {
    moduleOptions: {
      treeshaking: true,
      useIconCDN: true,
      autoImport: true,
    },
    vuetifyOptions: {
      ssr: true,
      defaults: {
        global: {
          ripple: true,
        },
        VSheet: {
          elevation: 4,
        },
      },
      locale: {
        locale: 'en',
        fallback: 'en',
      },
      theme: {
        themes: {
          myCustomDarkTheme: {
            dark: true,
            colors: {
              background: '#262626',
              surface: '#212121',
              'surface-variant': '#29b6f6',
              'on-surface-variant': '#424242',
              primary: '#29b6f6',
              'primary-darken-1': '#000000',
              secondary: '#d7ccc8',
              'secondary-darken-1': '#0086c3',
              error: '#CF6679',
              info: '#2196F3',
              success: '#4CAF50',
              warning: '#FB8C00',
            },
          },
        },
        defaultTheme: 'myCustomDarkTheme',
      },
    },
  },
})
rrolla commented 8 months ago

I'm really curious if I'm really the only one having this troublesome development?

ofoud2024 commented 8 months ago

I do have the same issue as well. A lot of files are being downloaded on page load (about 500). Although small, but the network overhead is big which causes the initial loading to be very slow (45seconds for me just to load vuetify components files).