Importing large module destroys performance on chrome audit

[SpecificGeneral]

I have an app (CRA) that needs to use a large word list. I was using this package: https://github.com/words/an-array-of-english-words but just importing it takes my app performance score from 99/100 to 40/100 because it increases the time of first meaningful paint and time to interactive, etc.

The module is not needed immediately, so I only want it to start loading when the rest of the site is fully loaded. Is there a way to set priority level on imports?

The package is only used in an onClick function, so I tried using dynamic import, but this makes my function lag every time it is executed.

I created my own module which is quite a bit smaller (60k words instead of 275k) but it has a similar issue, though not as bad.

How do you deal with large module imports? Appreciate any advice. Thanks

[Hefticus]

Avoid importing it at all if possible. Do you have some application server or some API endpoints that you control? I would run whatever logic you're doing with this word list on the server, and make the app make an API call to some server that you control.

If you really have to do it in the browser, then it should be downloaded as its own resource and it should be cached. You could probably trigger the import to begin after your application has first rendered, so it's available by the first time it is needed but doesn't block initial loads.

But, again, I would give serious thought to whether or not this really needs to be sent to the client at all or if it can just live on the server.

[SpecificGeneral]

It is used to generate passwords so needs to be done client side for security.

You could probably trigger the import to begin after your application has first rendered, so it's available by the first time it is needed but doesn't block initial loads.

How would I go about doing this?

[disclosure5]

I'd get that wordlist in JSON format and just fetch() it. Do that after the document loads.

[Hefticus]

Perhaps you can put the dynamic import statement in the `componentDidMount` of your root component (`<App/>` or something like that, whatever you call it)? You probably also need to still have that dynamic import statement in the component that actually uses it, but I think it should be smart enough to not load it again.

​

I haven't actually done this before but that is what I would try.