Add webpack config for analyzing builds and improve ts speed

package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sonarjs": "0.19.0",
     "expose-loader": "4.1.0",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
     "html-loader": "4.2.0",
     "html-webpack-plugin": "5.5.3",
     "mini-css-extract-plugin": "2.7.6",
@@ -48,6 +49,7 @@
     "sass": "1.62.1",
     "sass-loader": "13.3.2",
     "source-map-loader": "4.0.1",
+    "speed-measure-webpack-plugin": "1.5.0",
     "style-loader": "3.3.3",
     "stylelint": "15.6.2",
     "stylelint-config-rational-order": "0.1.2",
@@ -57,6 +59,7 @@
     "ts-loader": "9.4.4",
     "typescript": "5.0.4",
     "webpack": "5.88.1",
+    "webpack-bundle-analyzer": "4.9.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-merge": "5.9.0",
@@ -136,6 +139,7 @@
   "scripts": {
     "start": "npm run serve",
     "serve": "webpack serve --config webpack.dev.js",
+    "build:analyze": "cross-env NODE_ENV=\"production\" webpack --config webpack.analyze.js",
     "build:development": "cross-env NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.dev.js",
     "build:production": "cross-env NODE_ENV=\"production\" NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.prod.js",
     "build:check": "tsc --noEmit",

webpack.analyze.js

@@ -0,0 +1,28 @@
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { merge } = require('webpack-merge');
+
+const prod = require('./webpack.prod');
+
+const smp = new SpeedMeasurePlugin();
+
+const config = merge(prod, {
+    plugins: [
+        new BundleAnalyzerPlugin({
+            excludeAssets: /-json\..*\.chunk\.js$/
+        })
+    ]
+});
+
+const searchPlugin = (name) => config.plugins.findIndex((e) => e.constructor.name === name);
+
+// NOTE: We need to re-add the mini css plugin to workaround this issue
+// https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167
+const miniCssPluginIndex = searchPlugin('MiniCssExtractPlugin');
+const miniCssPlugin = config.plugins[miniCssPluginIndex];
+
+const exportedConfig = smp.wrap(config);
+
+exportedConfig.plugins[miniCssPluginIndex] = miniCssPlugin;
+
+module.exports = exportedConfig;

webpack.common.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { DefinePlugin } = require('webpack');
@@ -100,6 +101,11 @@ const config = {
                     to: path.resolve(__dirname, './dist')
                 };
             })
+        }),
+        new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                configFile: path.resolve(__dirname, 'tsconfig.json')
+            }
         })
     ],
     output: {
@@ -110,6 +116,8 @@ const config = {
     },
     optimization: {
         runtimeChunk: 'single',
+        removeAvailableModules: false,
+        removeEmptyChunks: false,
         splitChunks: {
             chunks: 'all',
             maxInitialRequests: Infinity,
@@ -216,14 +224,22 @@ const config = {
                 exclude: /node_modules/,
                 use: [
                     'worker-loader',
-                    'ts-loader'
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            transpileOnly: true
+                        }
+                    }
                 ]
             },
             {
                 test: /\.(ts|tsx)$/,
                 exclude: /node_modules/,
                 use: [{
-                    loader: 'ts-loader'
+                    loader: 'ts-loader',
+                    options: {
+                        transpileOnly: true
+                    }
                 }]
             },
             /* modules that Babel breaks when transforming to ESM */