[gui] Speed up the web UI build

A clean build of the web UI (`npm run build`, also run by `make package`)
took about 76 seconds. It now takes about 6 seconds.

Root causes
-----------

1. The whole Vuetify stylesheet was compiled again for every component.
   `src/variables.scss` started with `@use 'vuetify/styles'`. Webpack adds
   this file to the top of every SCSS/Sass `<style>` block, so the full
   Vuetify CSS (about 350 KB) was compiled and bundled once per component,
   about 56 times. This was most of the build time. It also made the output
   twice as big (32 MB instead of 15 MB) and `main.js` 7 MB instead of 1 MB.
   `main.js` already imports `vuetify/styles` once, so these copies were not
   needed.

2. The JavaScript minifier was slow. Webpack uses Terser by default, which
   runs in JavaScript and makes two passes over the code.

3. Babel did more work than needed. Without a browser target it converted
   all code down to old ES5 syntax, and it also processed the whole Vuetify
   library from node_modules.

4. ESLint ran inside every production build, even though CI already runs
   `npm run test:lint` separately.

Fixes
-----

- `variables.scss` now only contains Sass variables, so it no longer outputs
  any CSS. The `:root` color variables moved to a new `src/global.css` file,
  imported once from `main.js`. A comment in `variables.scss` explains why
  CSS must not be put there.
- Minify with esbuild (through `minimizer-webpack-plugin`, which webpack
  already uses) instead of Terser.
- Add a "browserslist" target ("defaults") to package.json, and stop running
  Babel on packages in node_modules.
- Run the ESLint webpack plugin only in the development config.
- Let webpack clean the `dist` folder (`output.clean`) instead of running
  `rimraf` before the build.
- Clear the webpack cache when any build config file, package.json or
  .babelrc changes, not only when `webpack.common.js` changes.
- Makefile: do not run `npm install` twice when the UI has to be rebuilt.
- Remove `vue.config.js`, a leftover from Vue CLI that nothing reads.
- Fix `v-model` on a constant in `RunList.vue` and
  `ListReviewStatusRules.vue` (`itemsPerPageOptions`). esbuild warned that
  this assignment would throw. It is now a one-way `:items-per-page-options`
  binding.

Results
-------

Clean build with an empty cache, measured on the same machine.

|                         | Before | After  |
| ----------------------- | ------ | ------ |
| `npm run build` (total) | 76 s   | 6 s    |
| webpack compile time    | 72 s   | 4.3 s  |
| `dist` size             | 32 MB  | 15 MB  |

This PR was mainly generated by AI.

Author: barnabasdomozi

web/Makefile

@@ -129,10 +129,10 @@ standalone_package: venv package
 
 # This target will check if the 'dist' directory exists and the vue-cli folder
 # is changed. In this case it will remove the dist directory so the UI will
-# be built again.
+# be built again. Dependencies are installed by the $(DIST_DIR) target.
 check_dist:
 	if [ "$(BUILD_UI_DIST)" = "YES" ] && [ -d $(DIST_DIR) ] && [ "$(LATEST_COMMIT)" != "$(LATEST_BUILD_COMMIT)" ]; then \
-	  cd server/vue-cli && npm install && rm -rf $(DIST_DIR); \
+	  rm -rf $(DIST_DIR); \
 	fi
 
 clean_package:

web/server/vue-cli/config/webpack.common.js

@@ -2,7 +2,6 @@ const CopyPlugin = require("copy-webpack-plugin");
 const HTMLWebpackPlugin = require("html-webpack-plugin");
 const { VueLoaderPlugin } = require("vue-loader");
 const { DefinePlugin, ProvidePlugin } = require("webpack");
-const ESLintPlugin = require("eslint-webpack-plugin");
 
 const { join } = require("path");
 const helpers = require("./helpers");
@@ -94,11 +93,14 @@ module.exports = {
       {
         test: /\.js$/,
         loader: "babel-loader",
+        // Dependencies already ship code for the browsers listed in the
+        // "browserslist" field of package.json, so only our own sources go
+        // through babel.
         // The Thrift API stubs (in `codechecker_api/js`) are plain CommonJS.
         // Exclude them like node_modules so babel doesn't turn them into ES
         // modules and break their `module.exports`.
         exclude: [
-          /node_modules\/(?!vuetify)/,
+          /[\\/]node_modules[\\/]/,
           /[\\/]codechecker_api[\\/]js[\\/]/
         ],
         options: {
@@ -203,10 +205,6 @@ module.exports = {
     new ProvidePlugin({
       Buffer: [ "buffer", "Buffer" ],
     }),
-    new ESLintPlugin({
-      extensions: [ "js", "vue" ]//,
-      //overrideConfigFile: "./.eslintrc.js"
-    }),
     new VueLoaderPlugin(),
     new HTMLWebpackPlugin({
       showErrors: true,
@@ -244,8 +242,15 @@ module.exports = {
   },
   cache: {
     type: "filesystem",
+    // Invalidate the cache when any of the build configuration changes.
     buildDependencies: {
-      config: [ __filename ]
+      config: [
+        __filename,
+        helpers.root("config", "webpack.dev.js"),
+        helpers.root("config", "webpack.prod.js"),
+        helpers.root("package.json"),
+        helpers.root(".babelrc")
+      ]
     }
   },
   snapshot: {

web/server/vue-cli/config/webpack.dev.js

@@ -1,5 +1,6 @@
 const { DefinePlugin } = require('webpack');
 const { merge } = require('webpack-merge');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 const common = require('./webpack.common.js');
 
@@ -58,6 +59,11 @@ module.exports = merge(common, {
     ]
   },
   plugins: [
+    // Lint only in development. Production builds skip it to save time;
+    // linting is checked separately by `npm run test:lint` (also in CI).
+    new ESLintPlugin({
+      extensions: [ "js", "vue" ]
+    }),
     new DefinePlugin({
       'process.env': {
         'CC_SERVER_HOST': process.env.CC_SERVER_HOST || null,

web/server/vue-cli/config/webpack.prod.js

@@ -1,5 +1,6 @@
 const { DefinePlugin } = require('webpack');
 const { merge } = require('webpack-merge');
+const MinimizerPlugin = require('minimizer-webpack-plugin');
 
 const common = require('./webpack.common.js');
 const helpers = require('./helpers');
@@ -9,7 +10,29 @@ module.exports = merge(common, {
   output: {
     path: helpers.root('dist'),
     filename: '[name].[contenthash].js',
-    publicPath: "/"
+    publicPath: "/",
+    // Remove the previous build output before emitting the new one.
+    clean: true
+  },
+  optimization: {
+    minimizer: [
+      // esbuild is many times faster than the default Terser minifier.
+      new MinimizerPlugin({
+        minify: MinimizerPlugin.esbuildMinify,
+        minimizerOptions: {
+          // Keep in sync with the "browserslist" field of package.json, so
+          // the minifier doesn't introduce syntax unsupported by those
+          // browsers.
+          target: 'es2020',
+          logOverride: {
+            // The generated Thrift API stubs contain duplicate `case 0:`
+            // clauses. They are harmless and our own sources are checked for
+            // this by ESLint (`no-duplicate-case`).
+            'duplicate-case': 'silent'
+          }
+        }
+      })
+    ]
   },
   plugins: [
     new DefinePlugin({