Initial page load of genspectrum downloads 1.6M - need to fix web component import

[anna-parker]

Discovered by @corneliusroemer, when loading the page over 1M of un-minified astro-related js files are downloaded (note that transferred and resources is the same implying no compression has been performed) - this is a real strain on page load times - especially as this is just for the data-less main page.

[anna-parker]

I add minify, this isn't enough:

13:48:12 [WARN] [vite] 
(!) Some chunks are larger than 500 kB 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.
13:48:12 [vite] ✓ built in 1.41s

So then I add the playform compress library to further compress - this still leads to a 1MB sized BaseLayout file:

(-3.6 KB)       4.15% reduction in //dist/client/_astro/compare-side-by-side.OOzja8K_.css
(-5.34 KB)      3.57% reduction in //dist/client/_astro/data.3Gi7N3Hu.css
(-4.3 KB)       4.60% reduction in //dist/client/_astro/data.CYMTs6d0.css
✓ Successfully compressed a total of 3 CSS files for 13.24 KB.
(-106.78 KB)    62.93% reduction in //dist/client/images/social-media-preview.png
✓ Successfully compressed a total of 1 Image file for 106.78 KB.
(-1 Bytes)      0.38% reduction in //dist/client/_astro/ErrorReportInstruction.CIIsO-N2.js
(-6 Bytes)      0.17% reduction in //dist/client/_astro/ErrorReportInstruction.D3sCEP5K.js
(-1 Bytes)      0.18% reduction in //dist/client/_astro/InputLabel.DB8y6HUM.js
(-20 Bytes)     0.97% reduction in //dist/client/_astro/LineageFilterChangedEvent-GedKNGFI.D7OQ10nn.js
(-29 Bytes)     3.09% reduction in //dist/client/_astro/LoginButton.C-j80P7Q.js
(-1 Bytes)      0.18% reduction in //dist/client/_astro/Modal.8pt53o1U.js
(-1 Bytes)      0.26% reduction in //dist/client/_astro/ModalHeader.BSXYcuKm.js
(-2 Bytes)      0.04% reduction in //dist/client/_astro/NotificationChannelDisplay.DDRuuphX.js
(-44 Bytes)     0.47% reduction in //dist/client/_astro/Organism.CsuJphg0.js
(-1 Bytes)      0.11% reduction in //dist/client/_astro/PageHeadline.BIuJZlLv.js
(-29 Bytes)     0.28% reduction in //dist/client/_astro/Subscriptions.CfCtukeH.js
(-107 Bytes)    1.14% reduction in //dist/client/_astro/SubscriptionsCreate.JsqnFIqr.js
(-11 Bytes)     1.37% reduction in //dist/client/_astro/VariantsSelector.DF2hcJtx.js
(-39 Bytes)     0.13% reduction in //dist/client/_astro/_astro-entry_react-toastify.BrgNpKJj.js
(-1 Bytes)      0.68% reduction in //dist/client/_astro/_astro-entry_react-toastify.C9CJMUnZ.js
(-1.66 KB)      1.25% reduction in //dist/client/_astro/client.kSEsvo32.js
(-1 Bytes)      0.53% reduction in //dist/client/_astro/index.CSFRfheO.js
(-30 Bytes)     0.05% reduction in //dist/client/_astro/index.CYiL3XuU.js
(-254 Bytes)    3.74% reduction in //dist/client/_astro/index.D2MAbzvX.js
(-259 Bytes)    25.85% reduction in //dist/client/_astro/jsx-runtime.CDeAccHH.js
13:48:15 [build] Waiting for integration "@playform/compress", hook "astro:build:done"...
(-94 Bytes)     0.16% reduction in //dist/client/_astro/routing.DZvg-9WO.js
✓ Successfully compressed a total of 21 JavaScript files for 2.57 KB.
(-567 Bytes)    23.84% reduction in //dist/client/virus-outline-colorful.svg
✓ Successfully compressed a total of 1 SVG file for 567 Bytes.

[anna-parker]

Looking at the file in more detail I see large comment sections with typescript - on closer review these are all web components. The base layout loads all web components on page load: https://github.com/GenSpectrum/dashboards/blob/main/website/src/layouts/base/BaseLayout.astro#L34 - this goes against good practice - we components should only be loaded when used.

[corneliusroemer]

You should also minify that npm package code, no need for comments, white

space etc. Do you mean on the components side? I tried minifying the code on the dashboards level but this doesn't remove the comments for some reason - you can see what I tried here: #536