Merge pull request #15795 from grafana/split-chunks-in-dev

Split javascript to a vendor chunk in dev-mode

scripts/webpack/webpack.common.js

@@ -10,7 +10,7 @@ module.exports = {
     path: path.resolve(__dirname, '../../public/build'),
     filename: '[name].[hash].js',
     // Keep publicPath relative for host.com/grafana/ deployments
-    publicPath: "public/build/",
+    publicPath: 'public/build/',
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.es6', '.js', '.json', '.svg'],
@@ -61,6 +61,18 @@ module.exports = {
       }
     ]
   },
+  // https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/].*[jt]sx?$/,
+          name: 'vendor',
+          chunks: 'all'
+        }
+      }
+    }
+  },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
       checkSyntacticErrors: true,

scripts/webpack/webpack.dev.js

@@ -58,25 +58,6 @@ module.exports = merge(common, {
     ]
   },
 
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        manifest: {
-          chunks: "initial",
-          test: "vendor",
-          name: "vendor",
-          enforce: true
-        },
-        vendor: {
-          chunks: "initial",
-          test: "vendor",
-          name: "vendor",
-          enforce: true
-        }
-      }
-    }
-  },
-
   plugins: [
     new CleanWebpackPlugin('../../public/build', { allowExternal: true }),
     new MiniCssExtractPlugin({

scripts/webpack/webpack.prod.js

@@ -47,17 +47,7 @@ module.exports = merge(common, {
       })
     ]
   },
-
   optimization: {
-    splitChunks: {
-      cacheGroups: {
-        commons: {
-          test: /[\\/]node_modules[\\/].*[jt]sx?$/,
-          name: "vendor",
-          chunks: "all"
-        }
-      }
-    },
     minimizer: [
       new UglifyJsPlugin({
         cache: true,
@@ -67,7 +57,6 @@ module.exports = merge(common, {
       new OptimizeCSSAssetsPlugin({})
     ]
   },
-
   plugins: [
     new MiniCssExtractPlugin({
       filename: "grafana.[name].[hash].css"