Migration from nuxt-speedkit to nuxt-booster

[fareed13]

Describe the bug
Build Size Increased from 104MB to 370MB After Migrating from Speed-Kit to Nuxt-Booster.

with nuxt-booster
nuxt verison: 3.5.3
nuxt-booster:3.0.16

with speed-kit
nuxt verison: 3.5.3
nuxt-speed-kit: 3.0.0-next.20

[ThornWalli]

Hello @fareed13 ,

could you have a look at where in the .output folder the problem occurs?

[fareed13]

@ThornWalli I encountered an issue with build size when using nuxt-booster compared to speed-kit. Here are the details:

Folder Name	With Speed Kit	With Booster
_nuxt	19.5 MB	18.8 MB
admin	11.4 MB	58.5 MB
blog	4.3 MB	21.7 MB
classes	47 MB	219.6 MB
curriculum	7.1 MB	1.4 MB
instructor	4.3 MB	20.2 MB
location	1.9 MB	8.9 MB
locations	3.3 MB	14 MB
agreements	304 KB	1.4 MB
attendance	307 KB	1.5 MB
belts	319 KB	1.5 MB
checkout	318 KB	1.5 MB
customers	321 KB	1.5 MB
events	304 KB	1.4 MB
gift-card	317 KB	1.5 MB
login	310 KB	1.5 MB
privacy-policy	304 KB	1.4 MB
profile	314 KB	1.5 MB
referral-hero	304 KB	1.5 MB
refund-policy	304 KB	1.4 MB
reservation	314 KB	1.5 MB
reviews	304 KB	1.4 MB
schedule	312 KB	1.5 MB
setup	269 KB	1.4 MB
test	303 KB	1.4 MB

As shown, the build size increases significantly for most folders when using nuxt-booster compared to speed-kit. This is causing issues with our deployment. Any insights or suggestions would be appreciated.

Thank you.

---

[ThornWalli]

Interesting, so either the index.html or _payload.json files seem to be larger?

Unfortunately I can't reproduce this, so can you take a closer look?

If necessary, please provide files so that I can take a look at what has happened.

[fareed13]

Thank you for looking into this. I took a closer look, and it seems that the significant size differences are primarily in the index.html files. Here are the specific sizes:

Folder Name	With Speed Kit	With Booster
index.html	289 KB	1.1 MB
_payload.json	631 bytes	631 bytes

As shown, the index.html files are much larger with nuxt-booster, while the _payload.json files remain the same size.

Unfortunately, due to the nature of our client's private repository, I'm unable to share the specific files directly. However, if there are any specific details or logs you need me to look at, please let me know and I'll do my best to provide the necessary information.

[fareed13]

@ThornWalli To help you reproduce the issue, I have created a public repository with the necessary setup. You can find the repository here: nuxt-3.5.3.

In the main branch, you will find the setup with nuxt-speedkit, which has a build size of 14 MB. I have also created a separate branch named migration-to-booster, and a PR has been created for this migration, which results in a build size of 31.3 MB. Please note that this repository contains a very small chunk of the application, and the build size increases as more pages are added.

To reproduce the issue, follow these steps:

Clone the repository.
Checkout the migration-to-booster branch.

Run the following commands to set environment variables:

1. export DEFAULT_PAGE_DOMAIN=lahore.abbitest1.com
2. export PORT=3999

If you need any additional information or if there's anything more required, please feel free to ask.

[ThornWalli]

Thanks @fareed13,

you are still using an old version 3.0.0-next.20 is already very old for not renamed 😉

At the moment another feature was added.
When generating the css files contained in the head are embedded.
Important in SSR, the CSS is already present.

This leads to the fact that 1 mb Vuetify CSS is now included.
Are you staying with Vuetify? has quite an overhead in itself and is not suitable for websites with good PageSpeed.

The focus is more on applications.

I can see the options right now:

1. add PurgeCSS, which removes unused CSS.
2. choose an alternative to Vuetify, e.g. https://tailwindcss.com/
3. deactivate the embedding of styles during generation

• ⚠️ Still needs to be implemented
• This would be an optional option that must be set separately.
• Also leads to further initial requests

[muhammad-grayphite]

@ThornWalli You're right about we are using 3.0.0-next.20 version, it was latest when we shifted from nuxt2 to nuxt3. However this older version working far better then the new one in term of load speed as well as build size.

We can't move to another UI as we have a very large scale website already built with vuetify.

For your reference please check https://github.com/fareed13/nuxt-3.5.3/pull/1/files diffrences. You can see that only changing nuxt-speedkit(deprecated) to nuxt-booster result in 13.6mb to 29.4mb, more than 2X increase in build size. performance is same on both of builds, I checked google pagespeed. Speedkit performs lil better BTW.
here I have deployed the sites on netlify to see the performance difference as well.
Website with speedkit
Website with booster

Screen.Recording.2024-07-02.at.6.37.12.PM.mov

here are the static builds (both with speedkit and booster) generated with nuxi generate command
builds.zip

So keep in mind that there is not a single change except for booster package, we got this results. Increase in build size and decrease in performance. When we implement this in our main a very large project, build size increases from 104mb to 370+mb as well as performance decrement. Doesn't make sense to me.

Your help is appreciated. thanks!

[ThornWalli]

@fareed13 @muhammad-grayphite

1. you could roughly deactivate this optimization with this https://basics.github.io/nuxt-booster/guide/options.html#optimizepreloads
2. Alternatively, I'm thinking about making it partially configurable, there's a lot going on https://github.com/basics/nuxt-booster/blob/main/src/utils/preload.js#L4

[ThornWalli]

@fareed13 @muhammad-grayphite

Got an update: npm i [email protected]

The property optimizePreloads has been replaced with optimizeSSR.

• The optimizeSSR property can be Boolean, then everything is activated
• Or an object is set.

  optimizeSSR: false, // default: true

  optimizeSSR: {
    cleanPreloads: true,
    cleanPrefetches: true,
    inlineStyles: true
  }

The embedding of the style can be deactivated there, for example.

  optimizeSSR: {
    inlineStyles: false
  }

[muhammad-grayphite]

@ThornWalli, I noticed that the build size has decreased by about 80MB. I’m not sure if this will impact our website’s Lighthouse performance, but I checked and didn’t see much difference. Are there any cons to using these settings?

However, the build size is still 290MB (down from 370MB), which is quite large compared to the 110MB we had in the previous version of Speedkit. Is there any noticeable change in Booster that could be contributing to this increase in size?

[ThornWalli]

@muhammad-grayphite

1. CSS files are initially loaded in the head. Should not make any difference to the old version.
   If necessary, you can still integrate https://www.npmjs.com/package/@nuxtjs/critters, which I had also removed.

2. integrate the CSS into the head because of FOUC. (https://de.wikipedia.org/wiki/Flash_of_Unstyled_Content) But it makes no sense with a large frontend framework with a lot of CSS.

What do you see in the index.html files?
These were large because the css was embedded.

This should no longer happen with this setting.

 optimizeSSR: {
    inlineStyles: false
  }

[muhammad-grayphite]

Yeah I think I see the noticeable difference. I can still see CSS in index file, yes file size decreased but its not enough. Other thing I can look into critters if it can help us.

[ThornWalli]

@muhammad-grayphite I removed all styles from the /index.html in the example, I noticed that the ssr payload is quite large. As formatted JSON >200KB.

Writes a lot of data when generating.

Maybe that would be interesting https://nuxt.com/docs/api/nuxt-config#renderjsonpayloads