build: remove unnecessary webpack plugins (#6386)

* build: remove duplicate file case check

* build: remove unused moment tree-shaking

* fix: nits

.eslintrc.js

@@ -31,6 +31,11 @@ module.exports = {
           'error',
           {
             paths: [
+              {
+                name: 'moment',
+                // tree-shaking for moment is not configured because it degrades performance - see craco.config.cjs.
+                message: 'moment is not configured for tree-shaking. If you use it, update the Webpack configuration.',
+              },
               {
                 name: 'zustand',
                 importNames: ['default'],

craco.config.cjs

@@ -2,7 +2,8 @@
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
 const { execSync } = require('child_process')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const { DefinePlugin } = require('webpack')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const { DefinePlugin, IgnorePlugin } = require('webpack')
 
 const commitHash = execSync('git rev-parse HEAD').toString().trim()
 const isProduction = process.env.NODE_ENV === 'production'
@@ -51,23 +52,34 @@ module.exports = {
   webpack: {
     plugins: [new VanillaExtractPlugin({ identifiers: 'short' })],
     configure: (webpackConfig) => {
-      webpackConfig.plugins = webpackConfig.plugins.map((plugin) => {
-        // Extend process.env with dynamic values (eg commit hash).
-        // This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
-        if (plugin instanceof DefinePlugin) {
-          Object.assign(plugin.definitions['process.env'], {
-            REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
-          })
-        }
+      webpackConfig.plugins = webpackConfig.plugins
+        .map((plugin) => {
+          // Extend process.env with dynamic values (eg commit hash).
+          // This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
+          if (plugin instanceof DefinePlugin) {
+            Object.assign(plugin.definitions['process.env'], {
+              REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
+            })
+          }
 
-        // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
-        // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
-        if (plugin instanceof MiniCssExtractPlugin) {
-          plugin.options.ignoreOrder = true
-        }
+          // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
+          // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
+          if (plugin instanceof MiniCssExtractPlugin) {
+            plugin.options.ignoreOrder = true
+          }
 
-        return plugin
-      })
+          return plugin
+        })
+        .filter((plugin) => {
+          // Case sensitive paths are enforced by TypeScript.
+          // See https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames.
+          if (plugin instanceof CaseSensitivePathsPlugin) return false
+
+          // IgnorePlugin is used to tree-shake moment locales, but we do not use moment in this project.
+          if (plugin instanceof IgnorePlugin) return false
+
+          return true
+        })
 
       // We're currently on Webpack 4.x which doesn't support the `exports` field in package.json.
       // Instead, we need to manually map the import path to the correct exports path (eg dist or build folder).