build: webpack dev performance optimizations

package.json

@@ -136,6 +136,7 @@
     "postcss-less": "^6.0.0",
     "resolve-url-loader": "^5.0.0",
     "standard": "^17.1.0",
+    "style-loader": "^4.0.0",
     "stylelint": "^15.10.1",
     "stylelint-config-standard": "^34.0.0",
     "terser-webpack-plugin": "^5.3.3",

tools/webpack/webpack.main.config.ts

@@ -5,46 +5,63 @@ import type { Configuration } from 'webpack';
 import { plugins } from './common/webpack.plugins';
 import { rules } from './common/webpack.rules';
 
-export const mainConfig: Configuration = {
-  /**
-   * This is the main entry point for your application, it's the first file
-   * that runs in the main process.
-   */
-  entry: './src/main/main.ts',
-  module: {
-    rules,
-  },
-  devtool: 'source-map',
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-    extensionAlias: {
-      '.js': ['.js', '.ts'],
+export const mainConfig = (
+  _env: unknown,
+  args: Record<string, unknown>,
+): Configuration => {
+  const isDev = args.mode !== 'production';
+
+  return {
+    /**
+     * This is the main entry point for your application, it's the first file
+     * that runs in the main process.
+     */
+    entry: './src/main/main.ts',
+    module: {
+      rules,
     },
-  },
-  // https://webpack.js.org/configuration/optimization/#optimizationnodeenv
-  plugins: [
-    ...plugins,
-    new CopyPlugin({
-      patterns: [
-        {
-          from: 'static/electron-quick-start',
-          to: '../static/electron-quick-start',
-        },
-        { from: 'static/show-me', to: '../static/show-me' },
-        { from: 'assets/icons/fiddle.png', to: '../assets/icons/fiddle.png' },
-        { from: 'node_modules/sfw/dist/sfw.mjs', to: '../sfw/dist/sfw.mjs' },
-        { from: 'node_modules/sfw/package.json', to: '../sfw/package.json' },
-      ],
-    }),
-  ],
-  optimization: {
-    nodeEnv: false,
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        // We don't want to minimize the files - electron-quick-start/* and show-me/*
-        exclude: /static/,
+    devtool: 'source-map',
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+      extensionAlias: {
+        '.js': ['.js', '.ts'],
+      },
+    },
+    // https://webpack.js.org/configuration/optimization/#optimizationnodeenv
+    plugins: [
+      ...plugins,
+      new CopyPlugin({
+        patterns: [
+          {
+            from: 'static/electron-quick-start',
+            to: '../static/electron-quick-start',
+          },
+          { from: 'static/show-me', to: '../static/show-me' },
+          {
+            from: 'assets/icons/fiddle.png',
+            to: '../assets/icons/fiddle.png',
+          },
+          {
+            from: 'node_modules/sfw/dist/sfw.mjs',
+            to: '../sfw/dist/sfw.mjs',
+          },
+          {
+            from: 'node_modules/sfw/package.json',
+            to: '../sfw/package.json',
+          },
+        ],
       }),
     ],
-  },
+    optimization: {
+      nodeEnv: false,
+      minimize: !isDev,
+      minimizer: [
+        new TerserPlugin({
+          // We don't want to minimize the files - electron-quick-start/* and show-me/*
+          exclude: /static/,
+        }),
+      ],
+    },
+    cache: isDev ? { type: 'filesystem' } : false,
+  };
 };

tools/webpack/webpack.renderer.config.ts

@@ -6,92 +6,102 @@ import { DefinePlugin } from 'webpack';
 import { plugins } from './common/webpack.plugins';
 import { rules } from './common/webpack.rules';
 
-export const rendererConfig: Configuration = {
-  module: {
-    rules: [
-      ...rules,
-      // Handling styles
-      {
-        test: /\.css$/,
-        use: [
-          { loader: MiniCssExtractPlugin.loader },
-          { loader: 'css-loader' },
-        ],
-      },
-      {
-        test: /\.less$/i,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            // Used to load the url loaders present in blueprintjs (/resources/icons)
-            loader: 'resolve-url-loader',
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              lessOptions: {
-                // Used to evaluate css function (https://github.com/palantir/blueprint/issues/5011).
-                math: 'always',
+export const rendererConfig = (
+  _env: unknown,
+  args: Record<string, unknown>,
+): Configuration => {
+  const isDev = args.mode !== 'production';
+  const styleLoader = isDev ? 'style-loader' : MiniCssExtractPlugin.loader;
+
+  return {
+    module: {
+      rules: [
+        ...rules,
+        // Handling styles
+        {
+          test: /\.css$/,
+          use: [{ loader: styleLoader }, { loader: 'css-loader' }],
+        },
+        {
+          test: /\.less$/i,
+          use: [
+            {
+              loader: styleLoader,
+            },
+            {
+              loader: 'css-loader',
+            },
+            {
+              // Used to load the url loaders present in blueprintjs (/resources/icons)
+              loader: 'resolve-url-loader',
+            },
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  // Used to evaluate css function (https://github.com/palantir/blueprint/issues/5011).
+                  math: 'always',
+                },
               },
             },
+          ],
+        },
+        // Handling assets
+        {
+          test: /\.(jpe?g|svg|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/[name][ext]',
           },
-        ],
-      },
-      // Handling assets
-      {
-        test: /\.(jpe?g|svg|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/i,
-        type: 'asset/resource',
-        generator: {
-          filename: 'assets/[name][ext]',
         },
-      },
-      {
-        test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
-        type: 'asset/resource',
-        generator: {
-          filename: 'fonts/[name][ext]',
+        {
+          test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'fonts/[name][ext]',
+          },
         },
-      },
-    ],
-  },
-  plugins: [
-    ...plugins,
-    new MonacoWebpackPlugin({
-      languages: ['typescript', 'javascript', 'html', 'css'],
-      // This array maps to specific entries in the Monaco metadata
-      // To see a full list and where they map to in VSCode, see 'monaco-editor/esm/metadata'
-      features: [
-        '!contextmenu',
-        '!iPadShowKeyboard',
-        '!snippets',
-        '!quickCommand',
-        '!quickOutline',
       ],
-    }),
-    new MiniCssExtractPlugin({
-      filename: './css/[name].css',
-      // https://github.com/webpack-contrib/mini-css-extract-plugin#experimentalUseImportModule
-      experimentalUseImportModule: false,
-    }),
-    // Workaround for Blueprint issue
-    // See https://github.com/palantir/blueprint/issues/3739
-    new DefinePlugin({
-      'process.env': '{}',
-    }),
-  ],
-  resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
-    alias: {
-      'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js',
     },
-    extensionAlias: {
-      '.js': ['.js', '.ts', '.tsx'],
+    plugins: [
+      ...plugins,
+      new MonacoWebpackPlugin({
+        languages: ['typescript', 'javascript', 'html', 'css'] as const,
+        // This array maps to specific entries in the Monaco metadata
+        // To see a full list and where they map to in VSCode, see 'monaco-editor/esm/metadata'
+        features: [
+          '!contextmenu',
+          '!iPadShowKeyboard',
+          '!snippets',
+          '!quickCommand',
+          '!quickOutline',
+        ] as const,
+      }),
+      ...(isDev
+        ? []
+        : [
+            new MiniCssExtractPlugin({
+              filename: './css/[name].css',
+              // https://github.com/webpack-contrib/mini-css-extract-plugin#experimentalUseImportModule
+              experimentalUseImportModule: false,
+            }),
+          ]),
+      // Workaround for Blueprint issue
+      // See https://github.com/palantir/blueprint/issues/3739
+      new DefinePlugin({
+        'process.env': '{}',
+      }),
+    ],
+    resolve: {
+      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
+      alias: {
+        'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js',
+      },
+      extensionAlias: {
+        '.js': ['.js', '.ts', '.tsx'],
+      },
     },
-  },
-  devtool: 'source-map',
+    devtool: 'source-map',
+    cache: isDev ? { type: 'filesystem' } : false,
+  };
 };

yarn.lock

@@ -5827,6 +5827,7 @@ __metadata:
     sfw: "npm:^2.0.4"
     shell-env: "npm:^3.0.1"
     standard: "npm:^17.1.0"
+    style-loader: "npm:^4.0.0"
     stylelint: "npm:^15.10.1"
     stylelint-config-standard: "npm:^34.0.0"
     terser-webpack-plugin: "npm:^5.3.3"
@@ -13601,6 +13602,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-loader@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "style-loader@npm:4.0.0"
+  peerDependencies:
+    webpack: ^5.27.0
+  checksum: 10c0/214bc0f3b018f8c374f79b9fa16da43df78c7fef2261e9a99e36c2f8387601fad10ac75a171aa8edba75903db214bc46952ae08b94a1f8544bd146c2c8d07d27
+  languageName: node
+  linkType: hard
+
 "style-search@npm:^0.1.0":
   version: 0.1.0
   resolution: "style-search@npm:0.1.0"