diff --git a/webpack.main.ts b/webpack.main.ts
index c060778073..cb2311fe15 100755
--- a/webpack.main.ts
+++ b/webpack.main.ts
@@ -36,6 +36,15 @@ export default function (): webpack.Configuration {
     externals: nodeExternals(),
     optimization: {
       minimize: isProduction,
+      // Automatically split vendor and commons in development
+      // (for faster re-compiling)
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: isDevelopment ? {
+        chunks: "all",
+      } : false,
+      runtimeChunk: isDevelopment ? {
+        name: (entrypoint: { name: string }) => `runtime-${entrypoint.name}`,
+      } : false,
     },
     module: {
       rules: [
diff --git a/webpack.renderer.ts b/webpack.renderer.ts
index 981a996613..91108a257e 100755
--- a/webpack.renderer.ts
+++ b/webpack.renderer.ts
@@ -79,6 +79,15 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
           }
         })
       ],
+      // Automatically split vendor and commons in development
+      // (for faster re-compiling)
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: isDevelopment ? {
+        chunks: "all",
+      }: false,
+      runtimeChunk: isDevelopment ? {
+        name: (entrypoint: { name: string }) => `runtime-${entrypoint.name}`,
+      }: false,
     },
 
     module: {