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
- [ ] https://github.com/Altinn/altinn-studio/issues/14040

[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.

[ErlingHauan]

Made some progress on this issue, but it is a challenge to complete it due to HTML being rendered through Razor.

Due to the code below, we get HTTP 404 errors when trying to fetch dashboard.js instead of dashboard.{hash}.js, which is what the files are called after code splitting.

var app = ViewBag.App;
var cssPath = Url.Content($"/designer/frontend/{app}/{app}.css");
var jsPath = Url.Content($"/designer/frontend/{app}/{app}.js");

Ideally this would be solved by HtmlWebpackPlugin, but it does not support cshtml files. It is possible to work around, but another approach might be to separate the frontend entirely from the backend, so that issues like this don't occur. Setting this to blocked.