Any way to split clientBundle into smaller chunks?

[molul]

My icons bundle size is 1008KB. Mostly because of using icons from the "flags" collection, which is quite heavy.

I don't know if it's feasible, but a way to automatically split the bundled icons into smaller chunk would be awesome. Example in nuxt.config.ts:

icon: {
    clientBundle: {
      icons: iconsToBundle,
      scan: false,
      sizeLimitKb: 1100,
      splitLimitKb: 500, // 500 by default
    }
  },

[antfu]

Technically we could do that, but in order to know which icon from which bundle, we have to import all the bundles anyway. How would that be helpful to split if they are going to be downloaded anyway?

[molul]

Well, first off, I'm not an expert, but from what I read when I was trying to improve my Nuxt app, I think I understood there are a few advantages that improve both performance and user experience, as well as positively impacting SEO:

1. Parallel Downloads: Browsers can download multiple smaller chunks simultaneously, making better use of network resources. This means 4 chunks of 500 KB can be downloaded faster than 2 chunks of 1000 KB.

2. Efficient Code Splitting and Lazy Loading: Smaller chunks allow to load only the code that's needed at any given moment, reducing the initial load time and speeding up the rendering of the page. This is crucial for improving the Time to Interactive (TTI) for users.

3. Better Caching: When we deploy updates, only the modified chunks need to be re-downloaded. This results in more efficient caching and less data usage for our users, as they can reuse the existing cached chunks.

4. Improved Error Recovery: If a network error occurs while loading a chunk, smaller chunks reduce the impact since only the affected chunk needs to be reloaded, instead of a large one.

5. Initial Page Load Performance: The user experience benefits from smaller chunks because the browser can start rendering and interacting with the page faster, reducing the initial load time.

6. SEO Advantages: Page speed is a crucial factor for search engine rankings. By reducing the size of our chunks, we can improve the overall loading speed of the page, which directly influences our SEO performance. Faster load times lead to higher rankings in search engines like Google, as they prioritize pages that provide a better user experience.

Disclaimer: I asked chatgpt to make that summary, so I apologize if it is inaccurate. At least it reflects the stuff I read in several articles about improving Nuxt performance for web vitals😅