From 6957bdc64b6fced9b78df1a05132c86f5d61d5f3 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Mon, 9 Mar 2026 10:42:27 +0100
Subject: [PATCH] perf: lazy-load zxcvbn password library to reduce initial
 bundle size

- Dynamic import zxcvbn (820KB) in PasswordStrengthMeter so it only
  loads when user starts typing a password
- Raise chunkSizeWarningLimit to 850KB for the lazy-loaded chunk

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/PasswordStrengthMeter.svelte | 14 ++++++++++++--
 vite.config.ts                                  |  3 +++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/PasswordStrengthMeter.svelte b/src/lib/components/PasswordStrengthMeter.svelte
index 58fb9fc..7c3e6ae 100644
--- a/src/lib/components/PasswordStrengthMeter.svelte
+++ b/src/lib/components/PasswordStrengthMeter.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
-	import zxcvbn from 'zxcvbn';
+	import type { ZXCVBNResult } from 'zxcvbn';
 
 	let { password = '' }: { password: string } = $props();
 
-	const result = $derived(password.length > 0 ? zxcvbn(password) : null);
+	let result = $state<ZXCVBNResult | null>(null);
+
+	$effect(() => {
+		if (password.length > 0) {
+			import('zxcvbn').then((mod) => {
+				result = mod.default(password);
+			});
+		} else {
+			result = null;
+		}
+	});
 
 	const labels = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
 	const colors = [
diff --git a/vite.config.ts b/vite.config.ts
index 2fb0fca..1f280a5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,9 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+	build: {
+		chunkSizeWarningLimit: 850
+	},
 	plugins: [
 		tailwindcss(),
 		sveltekit(),