This might be a very dumb question, but when I look into the files that are being loaded when opening up my Frontity testing environment, I see the following file: frontity-test.module.js and it’s ‘weighing’ 9.7 MB.
That’s quite a lot, so I’m wondering what it is and why it’s so big. Is this a combination of all Frontity files and the extra NPM modules that I added myself?
Hi @dominique,
Yes, that frontity-test.module.js is exactly that. That file is the final bundle that contains your react components and your CSS. This includes the dependencies you may have used from your react components.
If you go to your folder build you’ll see an analyze folder. This folder contains HTML files that you can open in the browser to check the weight of each dependency in this final bundle
With this information you can optimize the use of your dependencies to optimize the final bundle.
Another strategy you can use to reduce the size of the final bundles is to split some components in different bundles which will only be loaded when the component is required
Have a look at the Code Splitting section in the docs to read more about this
Hope this helps
That’s cool, I didn’t know about this analyze folder yet. It seems like at least 1.5MB is coming from the packages of Font Awesome. I guess I’ve still got some learning to do in this regard.
Oh, I just noticed that this file is not being served on the live site. That’s a relief. 