Nuxt•2y ago

Reduce unused javascript (nuxt)

After nuxt generate about 50% of index.js is not even used on the home page, can it be changed somehow?

20 Replies

Unknown User•16mo ago

Message Not Public

Filipe Crespo Dev•8mo ago

@manniL / TheAlexLichter You have example for this ?

manniL•8mo ago

Very project specific IMO

Filipe Crespo Dev•8mo ago

my project have the same problem i saw the file in my project and the lib (nuxt3-leaflet) is responsible for more than 50% have a option for included a lib only in page necessary?

Rigo•8mo ago

There are many options. I can discuss it with you if you feel like, hit me in DM (it depends on your project, on how many plugins you have, on how things get thrown around etc etc.)

manniL•8mo ago

of course, you can always lazy-load dependencies 🙂 but as Rigo said, it depends a lot on the project

salomon_.•8mo ago

Will that affect only bundling? Component still be server side rendered, right?

Filipe Crespo Dev•8mo ago

you have a example using lazy-load dependencies

manniL•8mo ago

it will effect bundling + what JS is loaded when but SSR will still work

Filipe Crespo Dev•8mo ago

@manniL / TheAlexLichter @Rigo I'm using SSR with Lazy in the components, but it doesn't work. the site still contains a lot of unused JS.

Filipe Crespo Dev•8mo ago

I've seen several configs, in vite, rollup, nitro and nuxt but all note remove the unused js

Rigo•8mo ago

Can we see your plugins? How are you loading external libraries?

Filipe Crespo Dev•8mo ago

  modules: [
    '@pinia/nuxt',
    'nuxt-icon',
    '@nuxt/image',
    '@vueuse/nuxt',
    '@nuxtjs/critters',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    'nuxt-gtag',
    'nuxt-simple-robots',
    'vue3-carousel-nuxt',
    '@nuxtjs/sitemap',
    '@nuxt/image',
    'nuxt3-leaflet',
  ],

  modules: [
    '@pinia/nuxt',
    'nuxt-icon',
    '@nuxt/image',
    '@vueuse/nuxt',
    '@nuxtjs/critters',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    'nuxt-gtag',
    'nuxt-simple-robots',
    'vue3-carousel-nuxt',
    '@nuxtjs/sitemap',
    '@nuxt/image',
    'nuxt3-leaflet',
  ],

Rigo•8mo ago

These are modules Do you have any plugins? Are you registering global components somewhere? I think I found the culprit

Rigo•8mo ago

https://github.com/Gugustinette/Nuxt-Leaflet/blob/main/src/runtime/leaflet-runtime.ts

GitHub

Nuxt-Leaflet/src/runtime/leaflet-runtime.ts at main · Gugustinette/...

A Nuxt 3 module to use Leaflet. Contribute to Gugustinette/Nuxt-Leaflet development by creating an account on GitHub.

Rigo•8mo ago

Nuxt leaflet module contains a plugin that load the whole leaflet package Which results as unused code in a page without leaflet map

Rigo•8mo ago

https://bundlephobia.com/package/[email protected]

leaflet v1.9.4 ❘ Bundlephobia

Find the size of javascript package leaflet v1.9.4. Bundlephobia helps you find the performance impact of npm packages.

Filipe Crespo Dev•8mo ago

In this case, what is the best way to import?

Cue•8mo ago

https://github.com/vue-leaflet/vue-leaflet?tab=readme-ov-file#server-side-rendering-ssr

GitHub

GitHub - vue-leaflet/vue-leaflet: vue-leaflet compatible with vue3

vue-leaflet compatible with vue3. Contribute to vue-leaflet/vue-leaflet development by creating an account on GitHub.

FoxCodeOP•8mo ago

No, I just ignored it, now I wish that my biggest problem was unused javascript 😅

Gaming

Programming

Reduce unused javascript (nuxt)