Reduce storybook build time with custom tweaks

- Shared
  - Remove CaseSensitivePathsPlugin
- Prod
  - Use `swc` when minifying

Further improvements may be possible in the future by upgrading to
React 6.14.0 and Storybook 7 (when available), and using
`storybook-addon-swc` as a babel replacement

Author: p2edwards

.storybook/main.js

@@ -1,6 +1,10 @@
 const path = require('path');
 const webpack = require('webpack');
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+
+let SpeedMeasurePlugin;
+if (process.env.MEASURE) {
+  SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+}
 
 module.exports = {
   stories: ['../jsapp/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -9,33 +13,32 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    // NB:
+    // 'storybook-addon-swc' may improve build speed in the future.
+    // - At time of writing, the build performance gains are negated because it
+    //   switches to a slower refresh plugin and also causes other compatibility
+    //   issues in Storybook 6.
+    // - Testing with React 16.14.0 and Storybook 7 (beta) seemed to perform
+    //   well.
   ],
   framework: '@storybook/react',
   core: {
     builder: '@storybook/builder-webpack5',
   },
-  webpackFinal: async (config, { configType }) => {
-    config.plugins.push(new webpack.ProvidePlugin({ $: 'jquery' })),
-      config.module.rules.push({
-        resolve: {
-          extensions: [
-            '.jsx',
-            '.js',
-            '.es6',
-            '.coffee',
-            '.ts',
-            '.tsx',
-            '.scss',
-          ],
-          alias: {
-            app: path.join(__dirname, '../app'),
-            jsapp: path.join(__dirname, '../jsapp'),
-            js: path.join(__dirname, '../jsapp/js'),
-            scss: path.join(__dirname, '../jsapp/scss'),
-            utils: path.join(__dirname, '../jsapp/js/utils'),
-          },
+  webpackFinal: async (config, {configType}) => {
+    config.plugins.push(new webpack.ProvidePlugin({$: 'jquery'}));
+    config.module.rules.push({
+      resolve: {
+        extensions: ['.jsx', '.js', '.es6', '.coffee', '.ts', '.tsx', '.scss'],
+        alias: {
+          app: path.join(__dirname, '../app'),
+          jsapp: path.join(__dirname, '../jsapp'),
+          js: path.join(__dirname, '../jsapp/js'),
+          scss: path.join(__dirname, '../jsapp/scss'),
+          utils: path.join(__dirname, '../jsapp/js/utils'),
         },
-      });
+      },
+    });
     config.module.rules.push(
       {
         test: /\.scss$/,
@@ -59,16 +62,48 @@ module.exports = {
         ],
       }
     );
+
+    // Build speed improvements
+    applySpeedTweaks(config);
+
     // Print speed measurement if env variable MEASURE is set
-    config.plugins.push(
-      new SpeedMeasurePlugin({ disable: !process.env.MEASURE })
-    );
+    if (process.env.MEASURE) {
+      const smp = new SpeedMeasurePlugin();
+      return smp.wrap(config);
+    }
     return config;
   },
   managerWebpack: async (config) => {
-    config.plugins.push(
-      new SpeedMeasurePlugin({ disable: !process.env.MEASURE })
-    );
+    // Build speed improvements
+    applySpeedTweaks(config);
+
+    if (process.env.MEASURE) {
+      const smp = new SpeedMeasurePlugin();
+      return smp.wrap(config);
+    }
     return config;
   },
 };
+
+/// Apply some customizations to the config, intended to decrease build time
+function applySpeedTweaks(config) {
+  // Remove a linter plugin added by Storybook: CaseSensitivePathsPlugin
+  // - Its purpose is to prevent macOS devs from accidentally pushing code
+  //   that relies on filesystem case-insensitivity in file imports.
+  // - We can let CI detect this instead, or use ESLint.
+  //   'import/no-unresolved': [2, { caseSensitive: true }]
+  config.plugins = config.plugins.filter(
+    (plugin) => plugin.constructor.name !== 'CaseSensitivePathsPlugin'
+  );
+
+  // Use swc to make the Terser step faster
+  if (config.mode === 'production') {
+    const TerserPlugin = require('terser-webpack-plugin');
+    config.optimization.minimizer = [
+      new TerserPlugin({
+        minify: TerserPlugin.swcMinify,
+        terserOptions: {},
+      }),
+    ];
+  }
+}