Better bundle size prediction

package.json

@@ -27,18 +27,19 @@
 	],
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build -l silent && cd scripts && tsm size.ts",
 		"package": "svelte-package",
 		"pub": "pnpm package && cd scripts && tsm clean-pkg.ts && cd ../package && pnpm publish",
 		"preview": "vite preview"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "next",
 		"@sveltejs/package": "next",
+		"brotli-size": "^4.0.0",
 		"sass": "^1.54.9",
 		"svelte": "^3.50.1",
 		"svelte-preprocess": "^4.10.7",
-		"svelte2tsx": "^0.5.16",
+		"terser": "^5.15.0",
 		"tslib": "^2.4.0",
 		"tsm": "^2.2.2",
 		"typescript": "^4.8.3",

scripts/size.ts

@@ -0,0 +1,28 @@
+import { fileSync } from 'brotli-size';
+import { readdirSync } from 'fs';
+
+const jsRootPath = '../.svelte-kit/output/client/_app/immutable/chunks';
+const jsFile =
+	jsRootPath +
+	'/' +
+	readdirSync(jsRootPath, {
+		withFileTypes: true,
+	}).find((dirent) => dirent.name.includes('ConfettiExplosion'))?.name;
+
+const jsSize = (fileSync(jsFile) / 1024).toFixed(2);
+console.log('JS Size:', jsSize);
+
+const cssRootPath = '../.svelte-kit/output/client/_app/immutable/assets';
+const cssFile =
+	cssRootPath +
+	'/' +
+	readdirSync(cssRootPath, {
+		withFileTypes: true,
+	}).find((dirent) => dirent.name.includes('ConfettiExplosion'))?.name;
+
+const cssSize = (fileSync(cssFile) / 1024).toFixed(2);
+console.log('CSS Size:', cssSize);
+
+console.log('\n\n');
+
+console.log('Combined size: ', +jsSize + +cssSize);

src/routes/+page.svelte

@@ -13,6 +13,8 @@
 	/>
 </div>
 
+<a href="/extra-page" hidden>Another page</a>
+
 <style lang="scss">
 	:global(body) {
 		overflow: hidden;

src/routes/extra-page/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { ConfettiExplosion } from '$lib';
+</script>
+
+<ConfettiExplosion />

vite.config.ts

@@ -2,7 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 
 const config: UserConfig = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	build: { reportCompressedSize: true, minify: 'terser' },
 };
 
 export default config;