mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-12 12:06:57 +02:00
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:
co-authored by
Claude Opus 4.6
parent
e09c2a9c02
commit
6957bdc64b
@@ -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 = [
|
||||
|
||||
@@ -4,6 +4,9 @@ import tailwindcss from '@tailwindcss/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
chunkSizeWarningLimit: 850
|
||||
},
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
sveltekit(),
|
||||
|
||||
Reference in New Issue
Block a user