Investigate chunking for bundle size

[pmarsh-scottlogic]

What does chunking do for bundle size? Can we implement it in our app? Does Vite do anything for us here? Answer these questions, decide if we should try implementing it in our app. If so, write a ticket.

[pmarsh-scottlogic]

Notes

As far as I can tell, chunking and code splitting are the same thing.

The following applies to single page applications.

By default, we import modules at the top of each file, which tells the builder that "the code in these imports is necessary for this file to function". Each of those modules might import further modules and so on, meaning that the build will combine all this code into the one file.

Dynamic loading is a technique where, instead of importing dependencies at the top of a file, we can instead import a dependency only when it is needed. For example, if the app involves routing between several "pages", then we can import the component for a specific page only when it is needed by the user. This causes the build to be split into chunks - where the page component code is a separate file from the main index.js. For the user, this means that when they load the main page of the app, their browser will download and run the main website code. Then only when the user tries to open a new "page" will the browser download and run the chunk for that page. This reduces the initial load time for the website, with the drawback of increasing the load time on changing pages.

Chunking can happen wherever you like. Perhaps a part of the page opens only when you press a button. You could move that into a separate chunk.

Now, consider SpyLogic. We have only one "page", where you can access the same stuff mostly. As you move to level 3 and sandbox, you see more stuff on the page. Those bits could be chunked? However I think the most value will be in separating the code that uses external modules. So which external modules are most hefty? You can find out with certain tools, but that's for tomorrow

[pmarsh-scottlogic]

The Vite frontend build output:

as image:

as text:

vite v4.5.0 building for production...
node_modules/pdfjs-dist/build/pdf.js (1982:23) Use of eval in "node_modules/pdfjs-dist/build/pdf.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 1473 modules transformed.
dist/index.html                                        0.60 kB │ gzip:   0.38 kB
dist/assets/UserAvatar-b2331cdf.svg                    0.72 kB │ gzip:   0.41 kB
dist/assets/ResetProgressIcon-b363708c.svg             0.82 kB │ gzip:   0.41 kB
dist/assets/GettingStarted-bf0d26c7.svg                1.13 kB │ gzip:   0.57 kB
dist/assets/Outbox-52eda066.svg                        1.91 kB │ gzip:   0.66 kB
dist/assets/Handbook-f3fef0e4.svg                      2.57 kB │ gzip:   1.14 kB
dist/assets/BotAvatarDefault-2b733540.svg              6.82 kB │ gzip:   2.45 kB
dist/assets/BotAvatarError-3832a85a.svg                9.97 kB │ gzip:   3.79 kB
dist/assets/SmolFace_sm-1ca7e9ff.png                  11.16 kB
dist/assets/SpyLogicLogo_Affirmative-5640804c.png    101.46 kB
dist/assets/SpyLogicLogo-64bfd856.png                101.92 kB
dist/assets/lawyer-6b5663a5.png                      259.48 kB
dist/assets/handler-d4ef693e.png                     265.93 kB
dist/assets/manager-bed549be.png                     367.06 kB
dist/assets/CombinedFonts-bcd34977.ttf             1,177.74 kB
dist/assets/index-b6969a53.css                        43.44 kB │ gzip:   7.92 kB
dist/assets/index-65a4a862.js                      2,570.60 kB │ gzip: 752.97 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 17.38s

[pmarsh-scottlogic]

I used bundlePhobia to figure out the sizes of our imported modules. Here are the results.

React pdf renderer is the biggest module by three times. Which makes it a good candidate for code splitting! Especially since I anticipate many users won't be using that feature (being not part of the main game).

[pmarsh-scottlogic]

react's lazy method doesn't seem to be working in vite / react. We are reluctant to add a 3rd party module (though loadable-components does do the trick)

I've posted a question to stackoverflow to try and sort the lazy problem