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$/,
-        loader: 'babel-loader',
-        exclude: [
-          path.join(__dirname, 'node_modules')
-        ],
-        include: [
-          path.join(__dirname, 'app'),
-          path.join(__dirname, 'shared'),
-        ],
-        options: {
-          cacheDirectory: true
-        }
+       test: /\.js$/,
+       loader: 'babel-loader',
+       exclude: [
+         path.join(__dirname, 'node_modules')
+       ],
+       include: [
+         path.join(__dirname, 'app'),
+         path.join(__dirname, 'shared'),
+       ],
+       options: {
+         cacheDirectory: true
+       }
       },
       // inline base64 URLs for <=8k images, direct URLs for the rest
       { test: /\.(png|jpg|svg)$/, loader: 'url-loader' },
       {
-        test: /\.woff$/,
-        loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
+       test: /\.woff$/,
+       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',
+        },
+      },
+    },
+  }
 };