pref: JS bundling improvements (#1461)

* perf: Split only initial vendors

webpack.config.js

@@ -10,30 +10,30 @@ require('dotenv').config({ silent: true });
 module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
+    filename: '[name].[hash].js',
     publicPath: '/static/',
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+       test: /\.js$/,
-        loader: 'babel-loader',
+       loader: 'babel-loader',
-        exclude: [
+       exclude: [
-          path.join(__dirname, 'node_modules')
+         path.join(__dirname, 'node_modules')
-        ],
+       ],
-        include: [
+       include: [
-          path.join(__dirname, 'app'),
+         path.join(__dirname, 'app'),
-          path.join(__dirname, 'shared'),
+         path.join(__dirname, 'shared'),
-        ],
+       ],
-        options: {
+       options: {
-          cacheDirectory: true
+         cacheDirectory: true
-        }
+       }
       },
       // inline base64 URLs for <=8k images, direct URLs for the rest
       { test: /\.(png|jpg|svg)$/, loader: 'url-loader' },
       {
-        test: /\.woff$/,
+       test: /\.woff$/,
-        loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
+       loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
       },
       { test: /\.md/, loader: 'raw-loader' },
     ]
@@ -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: {