How to reduce the number of individual js files

[kristjanmar]

Are there any good strategies from reducing the number of individual js files imported by SvelteKit?

Most of the individual components are loaded as single files, as well as very tiny stores and functions that are often not more than a few lines.

For example, for one pageview there are 40+ JS files loaded with 15 of those being less than 1KB.

Here's an example of what my link response headers look like on one page:

<../../_app/immutable/assets/_layout-5ffc21c8.css>; rel="preload";as="style"; nopush, <../../_app/immutable/start-e4895bc1.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/preload-helper-aa6bc0ce.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/index-dd4ff9f3.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/singletons-d1216de7.js>; rel="modulepreload"; nopush, <../../_app/immutable/components/pages/_layout.svelte-8231e9f9.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/stores-6c525020.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/_commonjsHelpers-e864563f.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/classNames-391530ec.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/index-ad733c9a.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/Search-0a525f11.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/navigation-4ea30eb9.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/clickOutside-1e1d92ef.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/event-a21b9780.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/userStore-f9165c58.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/supabase-3be0cfe0.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/environment-56576f6f.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/notificationStore-0908f1c5.js>; rel="modulepreload"; nopush, <../../_app/immutable/components/pages/stocks/symbol/_layout.svelte-d0697aea.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/_StockHead-5dd5fbb2.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/quoteStore-1a1d1b67.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/marketOpen-70f93f9f.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/Tab-1ee7dce7.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/WithTooltip-75c572a2.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/LazyLoadFooter-5db230e4.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/LazyLoad-3fc31d0c.js>; rel="modulepreload"; nopush, <../../_app/immutable/components/pages/stocks/symbol/_page.svelte-226d114a.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/Head-0e6c5600.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/_NewsArea-8dfa4000.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/fetchData-68c28cc0.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/formatDates-d88e9efa.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/Button-2df02ef0.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/_NewsFeed-635bfce9.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/LiteYoutubeEmbed-6f59878f.js>; rel="modulepreload"; nopush, <../../_app/immutable/chunks/Sidebar1All-f7933f59.js>; rel="modulepreload"; nopush

[stalkerg]

The same issue.

[eltigerchino]

I think it might be because of Vite's chunking explained here: https://vitejs.dev/guide/features.html#build-optimizations

The chunking option can be disabled by setting build.rollupOptions.output.manualChunks to undefined in the vite.config.js file as mentioned in vitejs/vite#1683

[PlopTheReal]

Any news on this? I'm getting a tone of js files, one for each small svelte components regardless of the vite.config.js manualChunks option...

[0x2E]

bundleStrategy in https://svelte.dev/docs/kit/configuration#output

[eltigerchino]

This comment sheds some light on how to reduce the number of chunks
#3882 (comment)