Modified webpack.config.ts for the better performance

Signed-off-by: Gowtham Shanmugasundaram <[email protected]>

package.json

@@ -9,10 +9,6 @@
   ],
   "repository": "[email protected]:red-hat-storage/odf-console.git",
   "scripts": {
-    "clean": "yarn clean-mco && yarn clean-odf",
-    "clean-mco": "cd plugins/mco && rm -rf ./dist",
-    "clean-odf": "cd plugins/odf && rm -rf ./dist",
-    "clean-client": "cd plugins/client && rm -rf ./dist",
     "cypress-merge": "mochawesome-merge ./gui-test-screenshots/cypress_report*.json > ./gui-test-screenshots/cypress.json",
     "cypress-generate": "marge -o ./gui-test-screenshots/ -f cypress-report -t 'OpenShift Console Cypress Test Results' -p 'OpenShift Cypress Test Results' --showPassed false --assetsDir ./gui-test-screenshots/cypress/assets ./gui-test-screenshots/cypress.json",
     "cypress-postreport": "yarn cypress-merge && yarn cypress-generate",
@@ -21,7 +17,7 @@
     "test-coverage": "jest --config=jest/config.js --silent --coverage --coverageReporters text-summary",
     "test-cypress": "node_modules/.bin/cypress open --e2e --config-file ./cypress/cypress.config.ts --env openshift=true",
     "test-cypress-headless": "node --max-old-space-size=4096 node_modules/.bin/cypress run --e2e --config-file ./cypress/cypress.config.ts --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless",
-    "build:generate": "yarn clean-${PLUGIN} && tsm ./scripts/versionCheck.mts --plugin ${PLUGIN} && tsm ./scripts/generatePluginPackage.mts --plugin ${PLUGIN}",
+    "build:generate": "tsm ./scripts/versionCheck.mts --plugin ${PLUGIN} && tsm ./scripts/generatePluginPackage.mts --plugin ${PLUGIN}",
     "build:plugin": "yarn build:generate && NODE_OPTIONS='--max-old-space-size=4096' yarn ts-node node_modules/.bin/webpack -c ./webpack.config.ts",
     "build": "NODE_ENV=production PLUGIN=odf I8N_NS=plugin__odf-console yarn build:plugin",
     "build-mco": "NODE_ENV=production PLUGIN=mco I8N_NS=plugin__odf-multicluster-console yarn build:plugin",

webpack.config.ts

@@ -9,53 +9,44 @@ import * as webpack from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
 
+// supported PLUGINS: odf/mco/client
+const PLUGIN = process.env.PLUGIN;
+if (PLUGIN === undefined) {
+  process.exit(1);
+}
+// switch current working directory based on the plugins
+const processPath = path.resolve(__dirname, `plugins/${PLUGIN}`);
+process.chdir(processPath);
+
+// supported languages
 const LANGUAGES = ['en', 'ja', 'ko', 'zh', 'es', 'fr'];
 const resolveLocale = (dirName: string, ns: string) =>
   LANGUAGES.map((lang) => ({
     from: path.resolve(dirName, `locales/${lang}/plugin__*.json`),
     to: `locales/${lang}/${ns}.[ext]`,
   }));
 
+// supported NODE_ENV: production/development
 const NODE_ENV = (process.env.NODE_ENV ||
   'development') as webpack.Configuration['mode'];
-const PLUGIN = process.env.PLUGIN;
+const isProduction = NODE_ENV === 'production';
 const OPENSHIFT_CI = process.env.OPENSHIFT_CI;
 
-if (PLUGIN === undefined) {
-  process.exit(1);
-}
-const processPath = path.resolve(__dirname, `plugins/${PLUGIN}`);
-process.chdir(processPath);
-
 const config: webpack.Configuration & DevServerConfiguration = {
   context: __dirname,
   mode: NODE_ENV,
   entry: {},
   output: {
     path: path.resolve('./dist'),
-    filename: '[name]-bundle.js',
-    chunkFilename: '[name]-chunk.js',
+    filename: '[name].bundle.[contenthash:8].js',
+    chunkFilename: '[name].[contenthash:8].js',
+    // Clean the output directory(dist) before emit
+    clean: true,
   },
   ignoreWarnings: [(warning) => !!warning?.file?.includes('shared module')],
   watchOptions: {
     ignored: ['node_modules', 'dist'],
   },
-  devServer: {
-    port: 9001,
-    devMiddleware: {
-      writeToDisk: true,
-    },
-    headers: {
-      'Cache-Control': 'no-store',
-    },
-    static: ['dist'],
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-    alias: {
-      '@odf/shared': path.resolve(__dirname, './packages/shared/src/'),
-    },
-  },
   module: {
     rules: [
       {
@@ -86,7 +77,7 @@ const config: webpack.Configuration & DevServerConfiguration = {
           {
             loader: 'thread-loader',
             options: {
-              ...(NODE_ENV === 'development'
+              ...(!isProduction
                 ? { poolTimeout: Infinity, poolRespawn: false }
                 : OPENSHIFT_CI
                 ? {
@@ -153,13 +144,34 @@ const config: webpack.Configuration & DevServerConfiguration = {
       cwd: process.cwd(),
     }),
   ],
-  devtool: 'eval-cheap-module-source-map',
+  // 'source-map' is recommended choice for production builds, A full SourceMap is emitted as a separate file.
+  // 'eval-source-map' is recommended for development but 'eval-cheap-module-source-map' is faster and gives better result.
+  devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
   optimization: {
-    chunkIds: 'named',
+    // 'deterministic' Good for long term caching.
+    // 'named' Readable ids for better debugging.
+    chunkIds: isProduction ? 'deterministic' : 'named',
+  },
+  devServer: {
+    port: 9001,
+    // Allow bridge running in a container to connect to the plugin dev server.
+    allowedHosts: 'all',
+    devMiddleware: {
+      writeToDisk: true,
+    },
+    static: ['dist'],
+    // Enable gzip compression for dev server
+    compress: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      '@odf/shared': path.resolve(__dirname, './packages/shared/src/'),
+    },
   },
 };
 
-if (NODE_ENV === 'production' || process.env.DEV_NO_TYPE_CHECK !== 'true') {
+if (isProduction || process.env.DEV_NO_TYPE_CHECK !== 'true') {
   config.plugins?.push(
     new ForkTsCheckerWebpackPlugin({
       issue: {