pref: JS bundling improvements (#1461)

* perf: Split only initial vendors

webpack.config.js

@@ -10,7 +10,7 @@ require('dotenv').config({ silent: true });
 module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
+    filename: '[name].[hash].js',
     publicPath: '/static/',
   },
   module: {
@@ -64,4 +64,17 @@ module.exports = {
   stats: {
     assets: false,
   },
+  optimization: {
+    runtimeChunk: 'single',
+    moduleIds: 'hashed',
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'initial',
+        },
+      },
+    },
+  }
 };

webpack.config.prod.js

@@ -7,17 +7,18 @@ const TerserPlugin = require('terser-webpack-plugin');
 commonWebpackConfig = require('./webpack.config');
 
 productionWebpackConfig = Object.assign(commonWebpackConfig, {
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].[contenthash].js',
+    publicPath: '/static/',
+  },
   cache: true,
   mode: "production",
   devtool: 'source-map',
   entry: ['./app/index'],
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'bundle.[hash].js',
-    publicPath: '/static/',
-  },
   stats: "normal",
   optimization: {
+    ...commonWebpackConfig.optimization,
     minimizer: [
       new TerserPlugin({
         terserOptions: {