EDIT (findings): I tried again after removing all references to Inertia, and only imported my example page in main.js (no other pages), and the result is the same: this example page component still weighs 62KB (unminified and uncompressed) according to the visualizer, whereas the corresponding MainPage.svelte file only weighs 5KB on the filesystem. It really feels like the visualizer is giving the size after imported stuff was incorporated in the file, even though it still displays said imported stuff alongside the svelte component in their own rectangles.
EDIT (findings): after trying from scratch with StackBlitz, I discovered that just using router from @inertiajs/svelte immediately adds 110KB to the final file (minified, uncompressed).
I have a tiny (3 pages: login + 2 other pages) app in Svelte+Inertia.
When in dev mode, one of my page components weighs 5KB. But when built, rollup-plugin-visualizer gives me 62KB for that same component (unminified, that is), and the total weight of my final JS file (building in "library mode") is 250KB... For just 3 tiny pages. It shouldn't be more than like 50KB.
The final file seems to include a few node modules (svelte for 31KB, inertia for 30KB, axios for 95KB, qs for 30KB, object-inspect for 19KB, etc.), which account for 250KB total (unminified), and my app files themselves account for a whopping 350KB unminified (three times what they actually weigh in the filesystem, including comments etc.: 120KB)
I can't understand how that can be. Each file is represented in its own rectangle, so it's not like rollup-plugin-visualizer is resolving imports and including them in the displayed size for each component or something. So, how can a single file go from 5KB (actual size) to 62KB ("rollup size", according to the visualizer)?
I have always been a fan of using tiny libs for specific needs in order to actively reduce the resulting apps sizes to the max (having slow mobile connections in mind), but now that I am trying Svelte (that I really love!!) I am disappointed with the final size for such a microscopic app, and I'd like to reduce it like to 50KB or something.
Any ideas? I'd like to stick to Svelte if possible. If I can't, then maybe there is another frontend framework that would be really tiny?
My vite options, if necessary:
build: { outDir: '../server/dist', // https://stackoverflow.com/a/66867648/1971322 emptyOutDir: false, lib: { entry: path.resolve(__dirname, 'src/main.js'), name: 'xyz', // This parameter is mandatory, but won't even be used... }, rollupOptions: { output: { entryFileNames: `js/[name].js`, chunkFileNames: `js/[name].js`, assetFileNames: `js/[name].[ext]` } }}