Improve webpack code splitting

[mlqn]

Description

The current Webpack configuration splits code by workspace. This might not be the most optimal configuration, as some workspaces (e.g app-development) generate large chunks (> 4MB) that exceed the recommended size (244 KiB).

I suggest reducing our bundle size by creating smaller chunks using SplitChunksPlugin and mini-css-extract-plugin for JS/CSS assets.

We also need to use HtmlWebpackPlugin to dynamically inject our bundles in our html files.

Additional Information

Here are the warnings generated by Webpack:

Server side warnings

Client side warnings

Performance hints

These warnings are not visible in production as the performance hints have been disabled. This may need to be reconsidered as the sizes of our assets differ in production and in local environments.

https://github.com/Altinn/altinn-studio/blob/beed659486cfa17f36a49cbd8abe764c71df0a92/frontend/webpack.config.prod.js#L10

Tasks

### Tasks
- [ ] Create smaller chunks
- [ ] Inject bundles using HtmlWebpackPlugin
- [ ] Enable performance hints in production

[webdiscus]

@mlqn

As a better alternative to HtmlWebpackPlugin, you can try using the modern html-bundler-webpack-plugin.

Using the HTML Bundler Plugin:

• the entrypoint a template file, not JS
• SCSS and TS source files you can define directly in HTML using a relative path or webpack aliases
• the plugin resolves source files of styles, scripts, images, fonts, etc. in templates and replaces them in the generated HTML with output filenames

This plugin replaces the functionality of the plugins and loaders:

• html-webpack-plugin
• mini-css-extract-plugin
• html-loader
• style-loader
• many other plugins and loaders

[framitdavid]

Should we consider Vite? 👼 We should also consider doing lazy loading of packages. Then we load modules runtime when the user is asking for it.

[framitdavid]

I blocked this until we can release feature branches to dev, since this feature/change should be well tested before merge/deploy.