Use separate chunk for all UI components instead of each module (#3519)

webpack.config.ts

@@ -2,19 +2,18 @@ import path from 'path';
 import fs from 'fs';
 import dotenv from 'dotenv';
 
+import type { Compiler, Configuration } from 'webpack';
 import {
+  ContextReplacementPlugin,
   DefinePlugin,
   EnvironmentPlugin,
-  ProvidePlugin,
-  ContextReplacementPlugin,
   NormalModuleReplacementPlugin,
+  ProvidePlugin,
 } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { GitRevisionPlugin } from 'git-revision-webpack-plugin';
 import StatoscopeWebpackPlugin from '@statoscope/webpack-plugin';
-
-import type { Configuration, Compiler } from 'webpack';
 import 'webpack-dev-server';
 
 import { version as appVersion } from './package.json';
@@ -230,16 +229,16 @@ export default function createConfig(
     devtool: APP_ENV === 'production' && IS_ELECTRON ? undefined : 'source-map',
 
     optimization: {
-      ...(APP_ENV !== 'production' && { chunkIds: 'named' }),
+      splitChunks: {
-      ...(['production', 'staging'].includes(APP_ENV) && {
+        cacheGroups: {
-        splitChunks: {
+          sharedComponents: {
-          cacheGroups: {
+            name: 'shared-components',
-            default: {
+            test: /[\\/]src[\\/]components[\\/]ui[\\/]/,
-              chunks: 'all',
-              minSize: 1,
-            },
           },
         },
+      },
+      ...(APP_ENV === 'staging' && {
+        chunkIds: 'named',
       }),
     },
   };