From b6874b8094f79ac0a48a5708dea9c3c96bb57318 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Thu, 20 Apr 2023 14:12:43 -0700 Subject: [PATCH] build: remove unnecessary webpack plugins (#6386) * build: remove duplicate file case check * build: remove unused moment tree-shaking * fix: nits --- .eslintrc.js | 5 +++++ craco.config.cjs | 44 ++++++++++++++++++++++++++++---------------- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 86fe6180a9..fde23cece1 100644 --- a/.eslintrc.js +++ b/.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'], diff --git a/craco.config.cjs b/craco.config.cjs index 5f9e54ecaa..a75a3955eb 100644 --- a/craco.config.cjs +++ b/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).