Reduce number of output files in production build from 400+ to 100+ (#363)

Co-authored-by: “tan-nhu” <“tan@harness.io”>

web/config/webpack.prod.js

@@ -2,7 +2,6 @@ const { merge } = require('webpack-merge')
 const HTMLWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CircularDependencyPlugin = require('circular-dependency-plugin')
-const JSONGeneratorPlugin = require('@harness/jarvis/lib/webpack/json-generator-plugin').default
 const { DefinePlugin } = require('webpack')
 
 const commonConfig = require('./webpack.common')
@@ -16,19 +15,25 @@ const prodConfig = {
     filename: '[name].[contenthash:6].js',
     chunkFilename: '[name].[id].[contenthash:6].js'
   },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      minSize: 51200,
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+          maxSize: 1e7
+        }
+      }
+    }
+  },
   plugins: [
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash:6].css',
       chunkFilename: '[name].[id].[contenthash:6].css'
     }),
-    new JSONGeneratorPlugin({
-      content: {
-        version: require('../package.json').version,
-        gitCommit: process.env.GIT_COMMIT,
-        gitBranch: process.env.GIT_BRANCH
-      },
-      filename: 'version.json'
-    }),
     new CircularDependencyPlugin({
       exclude: /node_modules/,
       failOnError: true