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>
This commit is contained in:
Frederic Cabassut
2026-03-09 10:42:27 +01:00
co-authored by Claude Opus 4.6
parent e09c2a9c02
commit 6957bdc64b
2 changed files with 15 additions and 2 deletions
@@ -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 = [
+3
View File
@@ -4,6 +4,9 @@ import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
build: {
chunkSizeWarningLimit: 850
},
plugins: [
tailwindcss(),
sveltekit(),