Split polyfills and libs to separate chunks

Author: kaisermann

.gitignore

@@ -1,5 +1,8 @@
 .DS_Store
 node_modules
 public/bundle.*
+public/libs_*
+public/runtime.*
+public/polyfills.*
 package-lock.json
-yarn.lock
+yarn.lock

babel.config.js

@@ -5,9 +5,10 @@ module.exports = {
       '@babel/preset-env',
       {
         loose: true,
-        /** Only parse modules if testing. If not, let webpack handle it */
+        // Only parse modules if testing. If not, let webpack handle it
         modules: false,
-        debug: true,
+        // set to true to see which polyfill is added to each file
+        debug: false,
         forceAllTransforms: true,
         useBuiltIns: 'usage',
         corejs: { version: 3, proposals: true },

webpack.config.js

@@ -61,4 +61,28 @@ module.exports = {
     }),
   ],
   devtool: prod ? false : 'source-map',
+  optimization: {
+    // create a separate chunk for webpack runtime
+    runtimeChunk: { name: 'runtime' },
+    splitChunks: {
+      chunks: 'all',
+      minSize: 0,
+      minChunks: 1,
+      automaticNameDelimiter: '_',
+      cacheGroups: {
+        vendors: false,
+        // node_modules thingies go to 'lib'
+        libs: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+        },
+        // Chunk that contains used polyfills
+        polyfills: {
+          test: /core-js/,
+          name: 'polyfills',
+          priority: 10,
+        },
+      },
+    },
+  },
 };