Timebox: Reduce the bundle size

[ccanos]

Description

As a an Alkemio user I want a reduced bundle so pages load faster

Acceptance criteria

• [ ] Investigate if other parts of the web application can be separated and is worth it the effort.

Hints:

• [ ] Maybe dynamically load only needed components of MUI
• [ ] Find insights from VITE
• [ ] Maybe there are tools that can help
• [ ] Check if Tree Shaking is enabled and working correctly
• [ ] Separate our components also in independent chunks (Component library?) #

Additional Context

After extracting Excalidraw from the bundle, (#6593) maybe other things can also be extracted.

From another issue:

• [ ] Evaluate options provided within Vite to reduce the size of the package that is downloaded to users
• [ ] Read up on other options offered by Vite that might be worth spiking
• [ ] Focus: tree shakedown (removing code not needed /used), identifying packages that can be removed from the client
• [ ] Identify what options there are for customizing our build process given our usage of react-scripts
• [ ] Markdown file with findings

Areas that will be affected

Client. The whole application.

Timeboxed to: one day

[techsmyth]

From Svetlo in #4367:

1. Links https://rizkicitra.dev/blog/improving-performance-in-react https://rizkicitra.dev/blog/improving-performance-in-react#using-vite-js https://www.npmjs.com/package/rollup-plugin-visualizer

2. Some code pushed in client-4637

   // vite.config.ts
   import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
   //...
   plugins: [
   chunkSplitPlugin({
   strategy: 'unbundle',
   customChunk: args => {
     // files into pages directory is export in single files
     let { file, id, moduleId, root } = args;
   
   },
   customSplitting: {
     'react-vendor': ['react', 'react-dom'],
     'core': [/src\/core/],
     'dev': [/src\/dev/],
     'domain': [/src\/domain/],
     'main': [/src\/main/],
     // 'core-ui': [/src\/core\/ui/],
     // 'core-apollo': [/src\/core\/apollo/],
     // 'core-auth': [/src\/core\/auth/],
     // 'core-routing': [/src\/core\/routing/],
     // 'core-utils': [/src\/core\/utils/],
   }
   })
   ]

3. Found out that the index.html adds some <link rel="modulepreload" crossorigin href="xxx"> and preloads all the resources when the page loads.