Build: Enable persistent cache for faster Webpack builds (#41430)

* build(webpack): enable caching for development and production builds

* build(webpack): introduce unminified production build script

* build(typescript): introduce incremental flag to cache typechecking

* chore(git): ignore typescript cache file

* chore(webpack): bump dependencies to latest

scripts/webpack/webpack.dev.js

@@ -59,6 +59,15 @@ module.exports = (env = {}) =>
       splitChunks: false,
     },
 
+    // enable persistent cache for faster cold starts
+    cache: {
+      type: 'filesystem',
+      name: 'grafana-default-development',
+      buildDependencies: {
+        config: [__filename],
+      },
+    },
+
     plugins: [
       parseInt(env.noTsCheck, 10)
         ? new DefinePlugin({}) // bogus plugin to satisfy webpack API

scripts/webpack/webpack.prod.js

@@ -9,68 +9,80 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const getBabelConfig = require('./babel.config');
 
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: 'source-map',
+module.exports = (env = {}) =>
+  merge(common, {
+    mode: 'production',
+    devtool: 'source-map',
 
-  entry: {
-    dark: './public/sass/grafana.dark.scss',
-    light: './public/sass/grafana.light.scss',
-  },
-
-  module: {
-    // Note: order is bottom-to-top and/or right-to-left
-    rules: [
-      {
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: getBabelConfig(),
-          },
-        ],
-      },
-      require('./sass.rule.js')({
-        sourceMap: false,
-        preserveUrl: false,
-      }),
-    ],
-  },
-  optimization: {
-    nodeEnv: 'production',
-    minimizer: [
-      new TerserPlugin({
-        parallel: false,
-      }),
-      new CssMinimizerPlugin(),
-    ],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'grafana.[name].[fullhash].css',
-    }),
-    new HtmlWebpackPlugin({
-      filename: path.resolve(__dirname, '../../public/views/error.html'),
-      template: path.resolve(__dirname, '../../public/views/error-template.html'),
-      inject: false,
-      excludeChunks: ['dark', 'light'],
-      chunksSortMode: 'none',
-    }),
-    new HtmlWebpackPlugin({
-      filename: path.resolve(__dirname, '../../public/views/index.html'),
-      template: path.resolve(__dirname, '../../public/views/index-template.html'),
-      inject: false,
-      excludeChunks: ['manifest', 'dark', 'light'],
-      chunksSortMode: 'none',
-    }),
-    function () {
-      this.hooks.done.tap('Done', function (stats) {
-        if (stats.compilation.errors && stats.compilation.errors.length) {
-          console.log(stats.compilation.errors);
-          process.exit(1);
-        }
-      });
+    entry: {
+      dark: './public/sass/grafana.dark.scss',
+      light: './public/sass/grafana.light.scss',
     },
-  ],
-});
+
+    module: {
+      // Note: order is bottom-to-top and/or right-to-left
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: getBabelConfig(),
+            },
+          ],
+        },
+        require('./sass.rule.js')({
+          sourceMap: false,
+          preserveUrl: false,
+        }),
+      ],
+    },
+    optimization: {
+      nodeEnv: 'production',
+      minimize: parseInt(env.noMinify, 10) !== 1,
+      minimizer: [
+        new TerserPlugin({
+          parallel: false,
+        }),
+        new CssMinimizerPlugin(),
+      ],
+    },
+
+    // enable persistent cache for faster builds
+    cache: {
+      type: 'filesystem',
+      name: 'grafana-default-production',
+      buildDependencies: {
+        config: [__filename],
+      },
+    },
+
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: 'grafana.[name].[fullhash].css',
+      }),
+      new HtmlWebpackPlugin({
+        filename: path.resolve(__dirname, '../../public/views/error.html'),
+        template: path.resolve(__dirname, '../../public/views/error-template.html'),
+        inject: false,
+        excludeChunks: ['dark', 'light'],
+        chunksSortMode: 'none',
+      }),
+      new HtmlWebpackPlugin({
+        filename: path.resolve(__dirname, '../../public/views/index.html'),
+        template: path.resolve(__dirname, '../../public/views/index-template.html'),
+        inject: false,
+        excludeChunks: ['manifest', 'dark', 'light'],
+        chunksSortMode: 'none',
+      }),
+      function () {
+        this.hooks.done.tap('Done', function (stats) {
+          if (stats.compilation.errors && stats.compilation.errors.length) {
+            console.log(stats.compilation.errors);
+            process.exit(1);
+          }
+        });
+      },
+    ],
+  });