Closed lekoaf closed 1 year ago
True, i think the sideEffects property in the package.json is missing.
I test it with a plain esbuild repo but it won't use the esm package automatically so i guess after setting the sideEffects property you still need to come up with a way to use the esm file instead of the cjs file 🤔
Because currently this works:
import { translations } from "@zxcvbn-ts/language-en/dist/index.esm.js"
But not this
import { translations } from "@zxcvbn-ts/language-en"
So the sideEffects goes in the right directions because previously both imports didn't work
Update!
Thanks for the update! Nice to know that the sideEffects flag did the trick for you :)
@lekoaf @MrWook I'm not sure I understand. For me, the Signup chunk checking the password strength has a size of ~2.5 megabytes. Can this get significantly smaller? If yes: How?
@codepunkt do you import more than the translations? Lekoaf is only importing the translations which are small json files. He is not using the dictionaries which are quite big as you can see.
Be aware that not using the dictionaries is not recommended and will hit the scoring negatively. As most of the scoring comes from comparing the password with those dictionaries. But its up to you if you want to decrease the bundle size of one specific page for password security.
I'd rather have the dictionaries on server and do the scoring there 🤷🏻
Yupp, we are only using the translations. The dictionaries were too big for our bundles, especially since we are using several languages, and will add more soon. The repeating patterns etc is good enough for us right now.
I did a bundle analysis with the 2.x version where I imported the translations directly from
dist/translations
and then did a new analysis today with the 3.x version where I doimport { translations as enTranslations } from '@zxcvbn-ts/language-en'
And the sizes got much, much worse as you can see in the image.
We are happy to help analyse the problem if you'd like, because we really like this project.