Open mlqn opened 4 months ago
@mlqn
As a better alternative to HtmlWebpackPlugin
, you can try using the modern html-bundler-webpack-plugin.
Using the HTML Bundler Plugin:
This plugin replaces the functionality of the plugins and loaders:
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.
I blocked this until we can release feature branches to dev, since this feature/change should be well tested before merge/deploy.
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