Main Bundle JS Too large with PrismicJS and Gatsby image (600kb!)

[antoine-doolaeghe]

Summary

Hard time to debug large Gatsby main bundle size after build (600kb!)

Relevant information

I'm having a hard time to understand why the index bundle is so heavy, nearly 600kb ! With nearly 3sec initial load. This slows the loading of index page images using gatsby-image (even when using the critical loading tag).

Here is the live version (make sure you are on the European store): https://nooz-optics-dev.com/eu

You can see the web page test Waterfall of the initial bundle here:

I am using a Prismic.io CMS in multiple language (7 language). The site is then deployed using Netlify.

Here is the bundle map using the bundle analyzer:

I've started to add some lazy loading for heavy node library such react-pdf but I'm not certain it will help for the overall bundle size. Some help on this would much appreciated !

Environment

System: OS: macOS Mojave 10.14.5 CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz Shell: 5.3 - /bin/zsh Binaries: Node: 13.5.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 80.0.3987.149 Safari: 12.1.1 npmPackages: gatsby: ^2.18.5 => 2.19.19 gatsby-image: ^2.2.29 => 2.2.41 gatsby-plugin-advanced-sitemap: ^1.4.5 => 1.5.1 gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5 gatsby-plugin-emotion: ^4.1.21 => 4.1.22 gatsby-plugin-firebase: ^0.1.6 => 0.1.8 gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 gatsby-plugin-google-tagmanager: ^2.1.25 => 2.1.25 gatsby-plugin-guess-js: ^1.1.32 => 1.1.32 gatsby-plugin-intl: ^0.3.1 => 0.3.3 gatsby-plugin-iubenda-cookie-footer: ^1.1.1 => 1.1.1 gatsby-plugin-layout: ^1.1.18 => 1.1.22 gatsby-plugin-manifest: ^2.2.30 => 2.2.41 gatsby-plugin-material-ui: ^2.1.6 => 2.1.6 gatsby-plugin-netlify: ^2.1.32 => 2.1.32 gatsby-plugin-nprogress: ^2.1.19 => 2.1.19 gatsby-plugin-offline: ^3.0.35 => 3.0.35 gatsby-plugin-react-helmet: ^3.1.13 => 3.1.22 gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 gatsby-plugin-sharp: ^2.2.32 => 2.4.5 gatsby-plugin-sitemap: ^2.2.27 => 2.2.27 gatsby-plugin-transition-link: ^1.13.0 => 1.17.7 gatsby-plugin-typescript: ^2.0.0-rc.4 => 2.1.27 gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 gatsby-source-filesystem: ^2.1.39 => 2.1.48 gatsby-source-prismic: ^2.3.0-alpha.3 => 2.3.0-alpha.3 gatsby-source-shopify: ^3.0.24 => 3.0.43 gatsby-transformer-json: ^2.2.20 => 2.2.26 gatsby-transformer-sharp: ^2.3.0 => 2.3.14

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[herecydev]

Looks like you've taken the right first steps in analyzing. I can't say that prismic or gatsby-image are causing you problems here but you can see why you're app is so big with varying different 3rd party libs you've added. Do you have any specific questions about why it's big otherwise it just seems like you need to weigh up the value each package adds vs the cost associated.

[LekoArts]

Thank you for opening this!

Your source (Prismic) isn't causing this as the data is pulled at build time. So this doesn't add any weight. If you use reasonable sizes for your Gatsby image usage, this also shouldn't cause these slowdowns.

As Dan said, your 3rd party libs are adding weight, e.g. the PDF library or Material UI. You should make sure that you lazy-loading is working correctly. Gatsby itself isn't that heavy so it's something you'll need to fix on your project :)

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!