From 338ec7dad74279bdbc4e06eed280c567ffb6f029 Mon Sep 17 00:00:00 2001
From: Karott <karott7@gmail.com>
Date: Tue, 10 May 2022 15:43:29 +0800
Subject: [PATCH] perf: refactor devWarning for production code size (#35411)

* pref: better code style for production

* refactor `devWarning`

* don't use `useEffect` only wrap `devWarning`

* chore: add 'noop' to coverage

* chore: add test cases for devWarning

* chore: add test case

* chore: update test cases for devWarning

* chore: restore test script command

* fix: remove 'throw new Error'

* should not use `throw` for browser

* chore: update test case for AutoComplete

* perf: add prefix for `devWarning`

* update RegExp for UMD

* add prefix for ES and CJS

* chore: better code style

* perf:

* upgrade antd-tools

* remove `injectWarningCondition`

* rename `devWarning` to `warning`

* chore: better code style

* chore: better code style

* chore: restore hasValidName
---
 components/_util/__tests__/warning.test.js    | 65 +++++++++++++++++++
 components/_util/devWarning.ts                | 12 ----
 components/_util/warning.ts                   | 21 ++++++
 .../auto-complete/__tests__/index.test.js     | 19 +++---
 components/auto-complete/index.tsx            | 32 ++++-----
 components/avatar/avatar.tsx                  |  4 +-
 components/breadcrumb/Breadcrumb.tsx          |  4 +-
 components/button/button-group.tsx            |  4 +-
 components/button/button.tsx                  |  6 +-
 components/cascader/index.tsx                 | 20 +++---
 components/checkbox/Checkbox.tsx              |  4 +-
 .../checkbox/__tests__/checkbox.test.js       |  2 +-
 components/collapse/CollapsePanel.tsx         |  4 +-
 components/collapse/__tests__/index.test.js   |  2 +-
 .../config-provider/__tests__/theme.test.ts   |  2 +-
 components/config-provider/cssVariables.tsx   |  4 +-
 .../__tests__/QuarterPicker.test.js           |  2 +-
 .../generatePicker/generateSinglePicker.tsx   |  4 +-
 .../descriptions/__tests__/index.test.js      |  2 +-
 components/descriptions/index.tsx             |  4 +-
 components/dropdown/dropdown.tsx              |  6 +-
 components/form/FormItem.tsx                  | 18 ++---
 components/form/FormList.tsx                  |  4 +-
 components/form/index.tsx                     |  4 +-
 components/icon/index.tsx                     |  4 +-
 components/input/Input.tsx                    |  4 +-
 components/list/__tests__/pagination.test.js  |  2 +-
 components/locale-provider/index.tsx          |  4 +-
 components/menu/__tests__/index.test.js       |  3 +-
 components/menu/index.tsx                     |  8 +--
 components/modal/ConfirmDialog.tsx            |  4 +-
 components/modal/confirm.tsx                  |  8 +--
 components/progress/progress.tsx              |  4 +-
 components/progress/utils.ts                  |  4 +-
 components/radio/radio.tsx                    |  6 +-
 components/result/index.tsx                   |  4 +-
 components/switch/__tests__/index.test.js     |  2 +-
 components/switch/index.tsx                   |  4 +-
 components/table/Table.tsx                    |  8 +--
 .../table/__tests__/Table.order.test.js       |  2 +-
 .../table/__tests__/Table.pagination.test.js  |  2 +-
 .../__tests__/Table.rowSelection.test.js      |  2 +-
 components/table/hooks/useFilter/index.tsx    |  4 +-
 components/table/hooks/useSelection.tsx       | 46 ++++++-------
 components/tabs/index.tsx                     |  4 +-
 .../time-picker/__tests__/index.test.js       |  2 +-
 components/time-picker/index.tsx              |  4 +-
 components/transfer/index.tsx                 |  4 +-
 components/tree-select/index.tsx              |  4 +-
 components/typography/Link.tsx                |  4 +-
 components/typography/Text.tsx                |  4 +-
 components/typography/Title.tsx               |  4 +-
 components/typography/Typography.tsx          |  4 +-
 components/upload/Upload.tsx                  | 24 ++++---
 components/upload/__tests__/upload.test.js    |  2 +-
 package.json                                  |  2 +-
 site/theme/template/Icon/index.jsx            |  2 +-
 site/theme/template/Icon/utils.js             |  2 +-
 webpack.config.js                             | 22 -------
 59 files changed, 252 insertions(+), 210 deletions(-)
 create mode 100644 components/_util/__tests__/warning.test.js
 delete mode 100644 components/_util/devWarning.ts
 create mode 100644 components/_util/warning.ts

diff --git a/components/_util/__tests__/warning.test.js b/components/_util/__tests__/warning.test.js
new file mode 100644
index 0000000000..2eeeb0f1bf
--- /dev/null
+++ b/components/_util/__tests__/warning.test.js
@@ -0,0 +1,65 @@
+describe('Test warning', () => {
+  let spy: jest.SpyInstance;
+
+  beforeAll(() => {
+    spy = jest.spyOn(console, 'error');
+  });
+
+  afterAll(() => {
+    spy.mockRestore();
+  });
+
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  afterEach(() => {
+    spy.mockReset();
+  });
+
+  it('Test noop', async () => {
+    const { noop } = await import('../warning');
+    const value = noop();
+
+    expect(value).toBe(undefined);
+    expect(spy).not.toHaveBeenCalled();
+    expect(() => {
+      noop();
+    }).not.toThrow();
+  });
+
+  describe('process.env.NODE_ENV !== "production"', () => {
+    it('If `false`, exec `console.error`', async () => {
+      const warning = (await import('../warning')).default;
+      warning(false, 'error');
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('If `true`, do not exec `console.error`', async () => {
+      const warning = (await import('../warning')).default;
+      warning(true, 'error message');
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('process.env.NODE_ENV === "production"', () => {
+    it('Whether `true` or `false`, do not exec `console.error`', async () => {
+      const prevEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+
+      const { default: warning, noop } = await import('../warning');
+
+      expect(warning).toEqual(noop);
+
+      warning(false, 'error message');
+      expect(spy).not.toHaveBeenCalled();
+
+      warning(true, 'error message');
+      expect(spy).not.toHaveBeenCalled();
+
+      process.env.NODE_ENV = prevEnv;
+    });
+  });
+});
diff --git a/components/_util/devWarning.ts b/components/_util/devWarning.ts
deleted file mode 100644
index 34090ca306..0000000000
--- a/components/_util/devWarning.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import devWarning, { resetWarned } from 'rc-util/lib/warning';
-
-export { resetWarned };
-
-export default (valid: boolean, component: string, message: string): void => {
-  devWarning(valid, `[antd: ${component}] ${message}`);
-
-  // StrictMode will inject console which will not throw warning in React 17.
-  if (process.env.NODE_ENV === 'test') {
-    resetWarned();
-  }
-};
diff --git a/components/_util/warning.ts b/components/_util/warning.ts
new file mode 100644
index 0000000000..ff7357f4f9
--- /dev/null
+++ b/components/_util/warning.ts
@@ -0,0 +1,21 @@
+import rcWarning, { resetWarned } from 'rc-util/lib/warning';
+
+export { resetWarned };
+export function noop() {}
+
+type Warning = (valid: boolean, component: string, message: string) => void;
+
+// eslint-disable-next-line import/no-mutable-exports
+let warning: Warning = noop;
+if (process.env.NODE_ENV !== 'production') {
+  warning = (valid, component, message) => {
+    rcWarning(valid, `[antd: ${component}] ${message}`);
+
+    // StrictMode will inject console which will not throw warning in React 17.
+    if (process.env.NODE_ENV === 'test') {
+      resetWarned();
+    }
+  };
+}
+
+export default warning;
diff --git a/components/auto-complete/__tests__/index.test.js b/components/auto-complete/__tests__/index.test.js
index 4c925f0e94..702e885278 100644
--- a/components/auto-complete/__tests__/index.test.js
+++ b/components/auto-complete/__tests__/index.test.js
@@ -42,16 +42,15 @@ describe('AutoComplete', () => {
   });
 
   it('AutoComplete throws error when contains invalid dataSource', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => undefined);
-    expect(() => {
-      mount(
-        <AutoComplete dataSource={[() => {}]}>
-          <textarea />
-        </AutoComplete>,
-      );
-    }).toThrow();
-    // eslint-disable-next-line no-console
-    console.error.mockRestore();
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    mount(
+      <AutoComplete dataSource={[() => {}]}>
+        <textarea />
+      </AutoComplete>,
+    );
+
+    expect(spy).toHaveBeenCalled();
   });
 
   it('legacy dataSource should accept react element option', () => {
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 99e5d59d29..fe080266d9 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -20,7 +20,7 @@ import type {
 import Select from '../select';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigConsumer } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { isValidElement } from '../_util/reactNode';
 import type { InputStatus } from '../_util/statusUtils';
 
@@ -95,26 +95,28 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
               );
             }
             default:
-              throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+              warning(
+                false,
+                'AutoComplete',
+                '`dataSource` is only supports type `string[] | Object[]`.',
+              );
+              return undefined;
           }
         })
       : [];
   }
 
-  // ============================ Warning ============================
-  React.useEffect(() => {
-    devWarning(
-      !('dataSource' in props),
-      'AutoComplete',
-      '`dataSource` is deprecated, please use `options` instead.',
-    );
+  warning(
+    !('dataSource' in props),
+    'AutoComplete',
+    '`dataSource` is deprecated, please use `options` instead.',
+  );
 
-    devWarning(
-      !customizeInput || !('size' in props),
-      'AutoComplete',
-      'You need to control style self instead of setting `size` when using customize input.',
-    );
-  }, []);
+  warning(
+    !customizeInput || !('size' in props),
+    'AutoComplete',
+    'You need to control style self instead of setting `size` when using customize input.',
+  );
 
   return (
     <ConfigConsumer>
diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
index 56fb5b9656..acd5192492 100644
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import { composeRef } from 'rc-util/lib/ref';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { Breakpoint } from '../_util/responsiveObserve';
 import { responsiveArray } from '../_util/responsiveObserve';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@@ -126,7 +126,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
       : {};
   }, [screens, size]);
 
-  devWarning(
+  warning(
     !(typeof icon === 'string' && icon.length > 2),
     'Avatar',
     `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index 7b9f3c6b25..f142276c05 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -5,7 +5,7 @@ import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import Menu from '../menu';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { cloneElement } from '../_util/reactNode';
 
 export interface Route {
@@ -119,7 +119,7 @@ const Breadcrumb: BreadcrumbInterface = ({
         return element;
       }
 
-      devWarning(
+      warning(
         element.type &&
           (element.type.__ANT_BREADCRUMB_ITEM === true ||
             element.type.__ANT_BREADCRUMB_SEPARATOR === true),
diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index b5124a9758..fae0fd127f 100644
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import type { SizeType } from '../config-provider/SizeContext';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export interface ButtonGroupProps {
   size?: SizeType;
@@ -34,7 +34,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = props => {
     case undefined:
       break;
     default:
-      devWarning(!size, 'Button.Group', 'Invalid prop `size`.');
+      warning(!size, 'Button.Group', 'Invalid prop `size`.');
   }
 
   const classes = classNames(
diff --git a/components/button/button.tsx b/components/button/button.tsx
index d412241ce9..9006e4ccd8 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -7,7 +7,7 @@ import Group, { GroupSizeContext } from './button-group';
 import { ConfigContext } from '../config-provider';
 import Wave from '../_util/wave';
 import { tuple } from '../_util/type';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import LoadingIcon from './LoadingIcon';
@@ -219,13 +219,13 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)?.(e);
   };
 
-  devWarning(
+  warning(
     !(typeof icon === 'string' && icon.length > 2),
     'Button',
     `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
   );
 
-  devWarning(
+  warning(
     !(ghost && isUnBorderedButtonType(type)),
     'Button',
     "`link` or `text` button can't be a `ghost` button.",
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 2fca6b2ce1..d6c414a3ce 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -14,7 +14,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import { useContext } from 'react';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -159,13 +159,17 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // =================== Warning =====================
-  if (process.env.NODE_ENV !== 'production') {
-    devWarning(
-      popupClassName === undefined,
-      'Cascader',
-      '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
-    );
-  }
+  warning(
+    popupClassName === undefined,
+    'Cascader',
+    '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+  );
+
+  warning(
+    !multiple || !props.displayRender,
+    'Cascader',
+    '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
+  );
 
   // =================== No Found ====================
   const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader');
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 522b1102b6..f067064fe6 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { FormItemInputContext } from '../form/context';
 import { GroupContext } from './Group';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -67,7 +67,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
 
   React.useEffect(() => {
     checkboxGroup?.registerValue(restProps.value);
-    devWarning(
+    warning(
       'checked' in restProps || !!checkboxGroup || !('value' in restProps),
       'Checkbox',
       '`value` is not a valid prop, do you mean `checked`?',
diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js
index f7a4bf89f6..027aeb0321 100644
--- a/components/checkbox/__tests__/checkbox.test.js
+++ b/components/checkbox/__tests__/checkbox.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent } from '../../../tests/utils';
 import Checkbox from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx
index 9dfd41beea..aefb76423e 100644
--- a/components/collapse/CollapsePanel.tsx
+++ b/components/collapse/CollapsePanel.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export type CollapsibleType = 'header' | 'disabled';
 
@@ -23,7 +23,7 @@ export interface CollapsePanelProps {
 }
 
 const CollapsePanel: React.FC<CollapsePanelProps> = props => {
-  devWarning(
+  warning(
     !('disabled' in props),
     'Collapse.Panel',
     '`disabled` is deprecated. Please use `collapsible="disabled"` instead.',
diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js
index 07a4587564..51ae51608d 100644
--- a/components/collapse/__tests__/index.test.js
+++ b/components/collapse/__tests__/index.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { sleep } from '../../../tests/utils';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 
 describe('Collapse', () => {
   // eslint-disable-next-line global-require
diff --git a/components/config-provider/__tests__/theme.test.ts b/components/config-provider/__tests__/theme.test.ts
index 0fd4ea4468..eba8d36a5a 100644
--- a/components/config-provider/__tests__/theme.test.ts
+++ b/components/config-provider/__tests__/theme.test.ts
@@ -1,7 +1,7 @@
 import { kebabCase } from 'lodash';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import ConfigProvider from '..';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 
 let mockCanUseDom = true;
 
diff --git a/components/config-provider/cssVariables.tsx b/components/config-provider/cssVariables.tsx
index dd31ba6432..237e37f6b2 100644
--- a/components/config-provider/cssVariables.tsx
+++ b/components/config-provider/cssVariables.tsx
@@ -5,7 +5,7 @@ import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import { TinyColor } from '@ctrl/tinycolor';
 import { generate } from '@ant-design/colors';
 import type { Theme } from './context';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
 
@@ -101,6 +101,6 @@ export function registerTheme(globalPrefixCls: string, theme: Theme) {
   if (canUseDom()) {
     updateCSS(style, `${dynamicStyleMark}-dynamic-theme`);
   } else {
-    devWarning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
+    warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
   }
 }
diff --git a/components/date-picker/__tests__/QuarterPicker.test.js b/components/date-picker/__tests__/QuarterPicker.test.js
index 70e44a9e62..c252fa9592 100644
--- a/components/date-picker/__tests__/QuarterPicker.test.js
+++ b/components/date-picker/__tests__/QuarterPicker.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import DatePicker from '..';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 
 const { QuarterPicker } = DatePicker;
 
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index ada7adf12b..4f9c6fe89e 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -9,7 +9,7 @@ import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import { forwardRef, useContext } from 'react';
 import enUS from '../locale/en_US';
 import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
-import devWarning from '../../_util/devWarning';
+import warning from '../../_util/warning';
 import type { ConfigConsumerProps } from '../../config-provider';
 import { ConfigContext } from '../../config-provider';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
@@ -41,7 +41,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
       constructor(props: InnerPickerProps) {
         super(props);
-        devWarning(
+        warning(
           picker !== 'quarter',
           displayName!,
           `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js
index 8d852de7ce..349fb8918d 100644
--- a/components/descriptions/__tests__/index.test.js
+++ b/components/descriptions/__tests__/index.test.js
@@ -3,7 +3,7 @@ import MockDate from 'mockdate';
 import { mount } from 'enzyme';
 import Descriptions from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 
 describe('Descriptions', () => {
   mountTest(Descriptions);
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index f8538e754d..45d87595bb 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
 import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import Row from './Row';
 import DescriptionsItem from './Item';
@@ -54,7 +54,7 @@ function getFilledItem(
     clone = cloneElement(node, {
       span: rowRestCol,
     });
-    devWarning(
+    warning(
       span === undefined,
       'Descriptions',
       'Sum of column `span` in a line not match `column` of Descriptions.',
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 217e0682f4..908d33ec07 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import DropdownButton from './dropdown-button';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/reactNode';
 import getPlacements from '../_util/placements';
@@ -105,7 +105,7 @@ const Dropdown: DropdownInterface = props => {
     const overlayProps = overlayNode.props;
 
     // Warning if use other mode
-    devWarning(
+    warning(
       !overlayProps.mode || overlayProps.mode === 'vertical',
       'Dropdown',
       `mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`,
@@ -143,7 +143,7 @@ const Dropdown: DropdownInterface = props => {
 
     if (placement.includes('Center')) {
       const newPlacement = placement.slice(0, placement.indexOf('Center'));
-      devWarning(
+      warning(
         !placement.includes('Center'),
         'Dropdown',
         `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 01abc0abb7..2288e30643 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -16,7 +16,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import Row from '../grid/row';
 import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
 import FormItemLabel from './FormItemLabel';
 import type { FormItemInputProps } from './FormItemInput';
@@ -77,7 +77,7 @@ export interface FormItemProps<Values = any>
 
 function hasValidName(name?: NamePath): Boolean {
   if (name === null) {
-    devWarning(false, 'Form.Item', '`null` is passed as `name` property');
+    warning(false, 'Form.Item', '`null` is passed as `name` property');
   }
   return !(name === undefined || name === null);
 }
@@ -387,33 +387,33 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
 
         let childNode: React.ReactNode = null;
 
-        devWarning(
+        warning(
           !(shouldUpdate && dependencies),
           'Form.Item',
           "`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
         );
         if (Array.isArray(children) && hasName) {
-          devWarning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
+          warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
           childNode = children;
         } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
-          devWarning(
+          warning(
             !!(shouldUpdate || dependencies),
             'Form.Item',
             '`children` of render props only work with `shouldUpdate` or `dependencies`.',
           );
-          devWarning(
+          warning(
             !hasName,
             'Form.Item',
             "Do not use `name` with `children` of render props since it's not a field.",
           );
         } else if (dependencies && !isRenderProps && !hasName) {
-          devWarning(
+          warning(
             false,
             'Form.Item',
             'Must set `name` or use render props when `dependencies` is set.',
           );
         } else if (isValidElement(children)) {
-          devWarning(
+          warning(
             children.props.defaultValue === undefined,
             'Form.Item',
             '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.',
@@ -449,7 +449,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
         } else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
           childNode = (children as RenderChildren)(context);
         } else {
-          devWarning(
+          warning(
             !mergedName.length,
             'Form.Item',
             '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.',
diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx
index 2cb5c415f3..6708e0ab14 100644
--- a/components/form/FormList.tsx
+++ b/components/form/FormList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { List } from 'rc-field-form';
 import type { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import { FormItemPrefixContext } from './context';
 
@@ -33,7 +33,7 @@ const FormList: React.FC<FormListProps> = ({
   children,
   ...props
 }) => {
-  devWarning(!!props.name, 'Form.List', 'Miss `name` prop.');
+  warning(!!props.name, 'Form.List', 'Miss `name` prop.');
 
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('form', customizePrefixCls);
diff --git a/components/form/index.tsx b/components/form/index.tsx
index 692e481040..8222b9d880 100644
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@@ -4,7 +4,7 @@ import Item, { FormItemProps } from './FormItem';
 import ErrorList, { ErrorListProps } from './ErrorList';
 import List, { FormListProps } from './FormList';
 import { FormProvider } from './context';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import useFormInstance from './hooks/useFormInstance';
 
 type InternalFormType = typeof InternalForm;
@@ -32,7 +32,7 @@ Form.useFormInstance = useFormInstance;
 Form.useWatch = useWatch;
 Form.Provider = FormProvider;
 Form.create = () => {
-  devWarning(
+  warning(
     false,
     'Form',
     'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.',
diff --git a/components/icon/index.tsx b/components/icon/index.tsx
index 05a3a1695d..0ced5db7a7 100755
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
@@ -1,7 +1,7 @@
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 const Icon = () => {
-  devWarning(false, 'Icon', 'Empty Icon');
+  warning(false, 'Icon', 'Empty Icon');
   return null;
 };
 
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index ec25c5b4fe..1940684a62 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -11,7 +11,7 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { hasPrefixSuffix } from './utils';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export interface InputFocusOptions extends FocusOptions {
   cursor?: 'start' | 'end' | 'all';
@@ -151,7 +151,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const prevHasPrefixSuffix = useRef<boolean>(inputHasPrefixSuffix);
   useEffect(() => {
     if (inputHasPrefixSuffix && !prevHasPrefixSuffix.current) {
-      devWarning(
+      warning(
         document.activeElement === inputRef.current?.input,
         'Input',
         `When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`,
diff --git a/components/list/__tests__/pagination.test.js b/components/list/__tests__/pagination.test.js
index 22176c2703..682d89c7a5 100644
--- a/components/list/__tests__/pagination.test.js
+++ b/components/list/__tests__/pagination.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import List from '..';
+import { noop } from '../../_util/warning';
 
 describe('List.pagination', () => {
   const data = [
@@ -65,7 +66,6 @@ describe('List.pagination', () => {
 
   it('fires change event', () => {
     const handlePaginationChange = jest.fn();
-    const noop = () => {};
     const wrapper = mount(
       createList({
         pagination: {
diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx
index 16103e1654..b35aba3819 100644
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import memoizeOne from 'memoize-one';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 import type { ModalLocale } from '../modal/locale';
 import { changeConfirmLocale } from '../modal/locale';
@@ -62,7 +62,7 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     super(props);
     changeConfirmLocale(props.locale && props.locale.Modal);
 
-    devWarning(
+    warning(
       props._ANT_MARK__ === ANT_MARK,
       'LocaleProvider',
       '`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale',
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
index 243d7b3f1c..dcab243fea 100644
--- a/components/menu/__tests__/index.test.js
+++ b/components/menu/__tests__/index.test.js
@@ -15,13 +15,12 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render, fireEvent } from '../../../tests/utils';
 import collapseMotion from '../../_util/motion';
+import { noop } from '../../_util/warning';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 const { SubMenu } = Menu;
 
-const noop = () => {};
-
 describe('Menu', () => {
   function triggerAllTimer() {
     for (let i = 0; i < 10; i += 1) {
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index 816b27af6e..518a0ad14b 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 import SubMenu, { SubMenuProps } from './SubMenu';
 import Item, { MenuItemProps } from './MenuItem';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { SiderContextProps } from '../layout/Sider';
 import { SiderContext } from '../layout/Sider';
 import collapseMotion from '../_util/motion';
@@ -67,19 +67,19 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
   const mergedChildren = useItems(items) || children;
 
   // ======================== Warning ==========================
-  devWarning(
+  warning(
     !('inlineCollapsed' in props && props.mode !== 'inline'),
     'Menu',
     '`inlineCollapsed` should only be used when `mode` is inline.',
   );
 
-  devWarning(
+  warning(
     !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
     'Menu',
     '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
   );
 
-  devWarning(
+  warning(
     !!items && !children,
     'Menu',
     '`children` will be removed in next major version. Please use `items` instead.',
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index c745cc7519..f27b6b8a83 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { ModalFuncProps } from './Modal';
 import Dialog from './Modal';
 import ActionButton from '../_util/ActionButton';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import ConfigProvider from '../config-provider';
 import { getTransitionName } from '../_util/motion';
 
@@ -44,7 +44,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     focusTriggerAfterClose,
   } = props;
 
-  devWarning(
+  warning(
     !(typeof icon === 'string' && icon.length > 2),
     'Modal',
     `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
index a7b3e2a24d..5b9075eede 100644
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@@ -8,7 +8,7 @@ import { getConfirmLocale } from './locale';
 import type { ModalFuncProps } from './Modal';
 import ConfirmDialog from './ConfirmDialog';
 import { globalConfig } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import destroyFns from './destroyFns';
 
 let defaultRootPrefixCls = '';
@@ -159,10 +159,6 @@ export function withConfirm(props: ModalFuncProps): ModalFuncProps {
 }
 
 export function modalGlobalConfig({ rootPrefixCls }: { rootPrefixCls: string }) {
-  devWarning(
-    false,
-    'Modal',
-    'Modal.config is deprecated. Please use ConfigProvider.config instead.',
-  );
+  warning(false, 'Modal', 'Modal.config is deprecated. Please use ConfigProvider.config instead.');
   defaultRootPrefixCls = rootPrefixCls;
 }
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index bb29fa1c78..71c88d12a1 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -8,7 +8,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigConsumer } from '../config-provider';
 import { tuple } from '../_util/type';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import Line from './Line';
 import Circle from './Circle';
 import Steps from './Steps';
@@ -121,7 +121,7 @@ export default class Progress extends React.Component<ProgressProps> {
     const progressStatus = this.getProgressStatus();
     const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
 
-    devWarning(
+    warning(
       !('successPercent' in props),
       'Progress',
       '`successPercent` is deprecated. Please use `success.percent` instead.',
diff --git a/components/progress/utils.ts b/components/progress/utils.ts
index 47785f5215..33e1185d9f 100644
--- a/components/progress/utils.ts
+++ b/components/progress/utils.ts
@@ -1,4 +1,4 @@
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export function validProgress(progress: number | undefined) {
   if (!progress || progress < 0) {
@@ -23,7 +23,7 @@ export function getSuccessPercent({
   let percent = successPercent;
   /** @deprecated Use `percent` instead */
   if (success && 'progress' in success) {
-    devWarning(
+    warning(
       false,
       'Progress',
       '`success.progress` is deprecated. Please use `success.percent` instead.',
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index 7984e3f9e6..615bb1a099 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -7,7 +7,7 @@ import { FormItemInputContext } from '../form/context';
 import type { RadioProps, RadioChangeEvent } from './interface';
 import { ConfigContext } from '../config-provider';
 import RadioGroupContext, { RadioOptionTypeContext } from './context';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (props, ref) => {
   const groupContext = React.useContext(RadioGroupContext);
@@ -18,9 +18,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
   const mergedRef = composeRef(ref, innerRef);
   const { isFormItemInput } = useContext(FormItemInputContext);
 
-  React.useEffect(() => {
-    devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
-  }, []);
+  warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
 
   const onChange = (e: RadioChangeEvent) => {
     props.onChange?.(e);
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 433e5bf5c8..dcbf7ead25 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -6,7 +6,7 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import WarningFilled from '@ant-design/icons/WarningFilled';
 
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 import noFound from './noFound';
 import serverError from './serverError';
@@ -52,7 +52,7 @@ const ExceptionStatus = Object.keys(ExceptionMap);
 const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
   const className = classNames(`${prefixCls}-icon`);
 
-  devWarning(
+  warning(
     !(typeof icon === 'string' && icon.length > 2),
     'Result',
     `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
diff --git a/components/switch/__tests__/index.test.js b/components/switch/__tests__/index.test.js
index 0840369aac..0fa29427c4 100644
--- a/components/switch/__tests__/index.test.js
+++ b/components/switch/__tests__/index.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Switch from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 377061bb16..eed4a036b8 100755
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -6,7 +6,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export type SwitchSize = 'small' | 'default';
 export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
@@ -48,7 +48,7 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
     },
     ref,
   ) => {
-    devWarning(
+    warning(
       'checked' in props || !('value' in props),
       'Switch',
       '`value` is not a valid prop, do you mean `checked`?',
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 5a750c080b..f002d93912 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -46,7 +46,7 @@ import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 
 export { ColumnsType, TablePaginationConfig };
@@ -137,7 +137,7 @@ function InternalTable<RecordType extends object = any>(
     showSorterTooltip = true,
   } = props;
 
-  devWarning(
+  warning(
     !(typeof rowKey === 'function' && rowKey.length > 1),
     'Table',
     '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
@@ -355,12 +355,12 @@ function InternalTable<RecordType extends object = any>(
     }
 
     const { current = 1, total, pageSize = DEFAULT_PAGE_SIZE } = mergedPagination;
-    devWarning(current > 0, 'Table', '`current` should be positive number.');
+    warning(current > 0, 'Table', '`current` should be positive number.');
 
     // Dynamic table data
     if (mergedData.length < total!) {
       if (mergedData.length > pageSize) {
-        devWarning(
+        warning(
           false,
           'Table',
           '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',
diff --git a/components/table/__tests__/Table.order.test.js b/components/table/__tests__/Table.order.test.js
index e9356170fc..9a8b60ebc0 100644
--- a/components/table/__tests__/Table.order.test.js
+++ b/components/table/__tests__/Table.order.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Table from '..';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 
 describe('Table.order', () => {
   window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
diff --git a/components/table/__tests__/Table.pagination.test.js b/components/table/__tests__/Table.pagination.test.js
index b2ca15c5e4..897b8603a2 100644
--- a/components/table/__tests__/Table.pagination.test.js
+++ b/components/table/__tests__/Table.pagination.test.js
@@ -5,7 +5,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Table from '..';
 import scrollTo from '../../_util/scrollTo';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 
 describe('Table.pagination', () => {
   const columns = [
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js
index 3d90c0d146..5221a573f9 100644
--- a/components/table/__tests__/Table.rowSelection.test.js
+++ b/components/table/__tests__/Table.rowSelection.test.js
@@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import Table from '..';
 import Checkbox from '../../checkbox';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import ConfigProvider from '../../config-provider';
 import { render } from '../../../tests/utils';
 
diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx
index 5d5fdf6ad0..c33cf02e30 100644
--- a/components/table/hooks/useFilter/index.tsx
+++ b/components/table/hooks/useFilter/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import devWarning from '../../../_util/devWarning';
+import warning from '../../../_util/warning';
 import type {
   TransformColumns,
   ColumnsType,
@@ -226,7 +226,7 @@ function useFilter<RecordType>({
       return filterStates;
     }
 
-    devWarning(
+    warning(
       filteredKeysIsAllControlled,
       'Table',
       'Columns should all contain `filteredValue` or not contain `filteredValue`.',
diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx
index 47f1e9b0bd..3cce80c152 100644
--- a/components/table/hooks/useSelection.tsx
+++ b/components/table/hooks/useSelection.tsx
@@ -13,7 +13,7 @@ import Checkbox from '../../checkbox';
 import Dropdown from '../../dropdown';
 import Menu from '../../menu';
 import Radio from '../../radio';
-import devWarning from '../../_util/devWarning';
+import warning from '../../_util/warning';
 import type {
   TableRowSelection,
   Key,
@@ -171,16 +171,11 @@ export default function useSelection<RecordType>(
       const checkboxProps = (getCheckboxProps ? getCheckboxProps(record) : null) || {};
       map.set(key, checkboxProps);
 
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        ('checked' in checkboxProps || 'defaultChecked' in checkboxProps)
-      ) {
-        devWarning(
-          false,
-          'Table',
-          'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
-        );
-      }
+      warning(
+        !('checked' in checkboxProps || 'defaultChecked' in checkboxProps),
+        'Table',
+        'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
+      );
     });
     return map;
   }, [flattedData, getRowKey, getCheckboxProps]);
@@ -313,7 +308,7 @@ export default function useSelection<RecordType>(
 
             const keys = Array.from(keySet);
             if (onSelectInvert) {
-              devWarning(
+              warning(
                 false,
                 'Table',
                 '`onSelectInvert` will be removed in future. Please use `onChange` instead.',
@@ -349,13 +344,11 @@ export default function useSelection<RecordType>(
     (columns: ColumnsType<RecordType>): ColumnsType<RecordType> => {
       // >>>>>>>>>>> Skip if not exists `rowSelection`
       if (!rowSelection) {
-        if (process.env.NODE_ENV !== 'production') {
-          devWarning(
-            !columns.includes(SELECTION_COLUMN),
-            'Table',
-            '`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
-          );
-        }
+        warning(
+          !columns.includes(SELECTION_COLUMN),
+          'Table',
+          '`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
+        );
 
         return columns.filter(col => col !== SELECTION_COLUMN);
       }
@@ -504,7 +497,7 @@ export default function useSelection<RecordType>(
           let mergedIndeterminate: boolean;
           if (expandType === 'nest') {
             mergedIndeterminate = indeterminate;
-            devWarning(
+            warning(
               typeof checkboxProps?.indeterminate !== 'boolean',
               'Table',
               'set `indeterminate` using `rowSelection.getCheckboxProps` is not allowed with tree structured dataSource.',
@@ -646,12 +639,13 @@ export default function useSelection<RecordType>(
 
       // Deduplicate selection column
       const selectionColumnIndex = cloneColumns.indexOf(SELECTION_COLUMN);
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        cloneColumns.filter(col => col === SELECTION_COLUMN).length > 1
-      ) {
-        devWarning(false, 'Table', 'Multiple `SELECTION_COLUMN` exist in `columns`.');
-      }
+
+      warning(
+        cloneColumns.filter(col => col === SELECTION_COLUMN).length <= 1,
+        'Table',
+        'Multiple `SELECTION_COLUMN` exist in `columns`.',
+      );
+
       cloneColumns = cloneColumns.filter(
         (column, index) => column !== SELECTION_COLUMN || index === selectionColumnIndex,
       );
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index 65bd31ae1c..e0772b736d 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -7,7 +7,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -53,7 +53,7 @@ function Tabs({
   }
   const rootPrefixCls = getPrefixCls();
 
-  devWarning(
+  warning(
     !('onPrevClick' in props) && !('onNextClick' in props),
     'Tabs',
     '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js
index 8f75cbf611..22ba636361 100644
--- a/components/time-picker/__tests__/index.test.js
+++ b/components/time-picker/__tests__/index.test.js
@@ -4,7 +4,7 @@ import moment from 'moment';
 import TimePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('TimePicker', () => {
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index ccd1479e7b..b8e6ed234d 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -2,7 +2,7 @@ import type { Moment } from 'moment';
 import * as React from 'react';
 import DatePicker from '../date-picker';
 import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { InputStatus } from '../_util/statusUtils';
 
 const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
@@ -39,7 +39,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
         return renderExtraFooter;
       }
       if (addon) {
-        devWarning(
+        warning(
           false,
           'TimePicker',
           '`addon` is deprecated. Please use `renderExtraFooter` instead.',
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index f6e8f8be2b..9019b45ce4 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -10,7 +10,7 @@ import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider
 import { ConfigConsumer } from '../config-provider';
 import type { TransferListBodyProps } from './ListBody';
 import type { PaginationType } from './interface';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { FormItemInputContext } from '../form/context';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
@@ -136,7 +136,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
       };
     }
 
-    devWarning(
+    warning(
       !pagination || !children,
       'Transfer',
       '`pagination` not support customize render list.',
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 4140344eb3..3f74bee0a8 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -7,7 +7,7 @@ import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeS
 import type { BaseSelectRef } from 'rc-select';
 import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { AntTreeNodeProps, TreeProps } from '../tree';
 import type { SwitcherIcon } from '../tree/Tree';
 import getIcons from '../select/utils/iconUtil';
@@ -87,7 +87,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
 
-  devWarning(
+  warning(
     multiple !== false || !treeCheckable,
     'TreeSelect',
     '`multiple` will always be `true` when `treeCheckable` is true',
diff --git a/components/typography/Link.tsx b/components/typography/Link.tsx
index 6a54b6a1d5..1c350225b8 100644
--- a/components/typography/Link.tsx
+++ b/components/typography/Link.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { BlockProps } from './Base';
 import Base from './Base';
 
@@ -13,7 +13,7 @@ const Link: React.ForwardRefRenderFunction<HTMLElement, LinkProps> = (
   { ellipsis, rel, ...restProps },
   ref,
 ) => {
-  devWarning(
+  warning(
     typeof ellipsis !== 'object',
     'Typography.Link',
     '`ellipsis` only supports boolean value.',
diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx
index 67dfb9444a..0684f07b99 100644
--- a/components/typography/Text.tsx
+++ b/components/typography/Text.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import omit from 'rc-util/lib/omit';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { BlockProps, EllipsisConfig } from './Base';
 import Base from './Base';
 
@@ -21,7 +21,7 @@ const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
     return ellipsis;
   }, [ellipsis]);
 
-  devWarning(
+  warning(
     typeof ellipsis !== 'object' ||
       !ellipsis ||
       (!('expandable' in ellipsis) && !('rows' in ellipsis)),
diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx
index caf9f8d33f..04d895628f 100644
--- a/components/typography/Title.tsx
+++ b/components/typography/Title.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { BlockProps } from './Base';
 import Base from './Base';
 import { tupleNum } from '../_util/type';
@@ -21,7 +21,7 @@ const Title: React.ForwardRefRenderFunction<HTMLHeadingElement, TitleProps> = (p
   if (TITLE_ELE_LIST.indexOf(level) !== -1) {
     component = `h${level}`;
   } else {
-    devWarning(
+    warning(
       false,
       'Typography.Title',
       'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx
index f64f82f239..6f702e107e 100644
--- a/components/typography/Typography.tsx
+++ b/components/typography/Typography.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export interface TypographyProps {
   id?: string;
@@ -35,7 +35,7 @@ const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> =
 
   let mergedRef = ref;
   if (setContentRef) {
-    devWarning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
+    warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
     mergedRef = composeRef(ref, setContentRef);
   }
 
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 9342a6503b..41ede6f630 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -18,7 +18,7 @@ import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
 
@@ -59,19 +59,17 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const upload = React.useRef<any>();
 
-  React.useEffect(() => {
-    devWarning(
-      'fileList' in props || !('value' in props),
-      'Upload',
-      '`value` is not a valid prop, do you mean `fileList`?',
-    );
+  warning(
+    'fileList' in props || !('value' in props),
+    'Upload',
+    '`value` is not a valid prop, do you mean `fileList`?',
+  );
 
-    devWarning(
-      !('transformFile' in props),
-      'Upload',
-      '`transformFile` is deprecated. Please use `beforeUpload` directly.',
-    );
-  }, []);
+  warning(
+    !('transformFile' in props),
+    'Upload',
+    '`transformFile` is deprecated. Please use `beforeUpload` directly.',
+  );
 
   // Control mode will auto fill file uid if not provided
   React.useMemo(() => {
diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js
index 1d72e7e2cb..b597607061 100644
--- a/components/upload/__tests__/upload.test.js
+++ b/components/upload/__tests__/upload.test.js
@@ -8,7 +8,7 @@ import Upload from '..';
 import Form from '../../form';
 import { getFileItem, removeFileItem, isImageUrl } from '../utils';
 import { setup, teardown } from './mock';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep, render, fireEvent } from '../../../tests/utils';
diff --git a/package.json b/package.json
index 6fd2de6e95..2cbc6691ef 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
   "devDependencies": {
     "@ant-design/bisheng-plugin": "^3.2.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "^15.0.0",
+    "@ant-design/tools": "^15.0.1",
     "@docsearch/css": "^3.0.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
diff --git a/site/theme/template/Icon/index.jsx b/site/theme/template/Icon/index.jsx
index 1706e8bc83..0499cc34fb 100644
--- a/site/theme/template/Icon/index.jsx
+++ b/site/theme/template/Icon/index.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import AntdIcon, { createFromIconfontCN } from '@ant-design/icons';
 
 import { withThemeSuffix, removeTypeTheme, getThemeFromTypeName } from './utils';
-import warning from '../../../../components/_util/devWarning';
+import warning from '../../../../components/_util/warning';
 
 const IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_1329669_t1u72b9zk8s.js',
diff --git a/site/theme/template/Icon/utils.js b/site/theme/template/Icon/utils.js
index 1eaaf31c09..1e236417de 100644
--- a/site/theme/template/Icon/utils.js
+++ b/site/theme/template/Icon/utils.js
@@ -1,4 +1,4 @@
-import warning from '../../../../components/_util/devWarning';
+import warning from '../../../../components/_util/warning';
 
 // These props make sure that the SVG behaviours like general text.
 // Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
diff --git a/webpack.config.js b/webpack.config.js
index 6a4dbba357..43c6d3b83b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -60,24 +60,6 @@ function externalMoment(config) {
   };
 }
 
-function injectWarningCondition(config) {
-  config.module.rules.forEach(rule => {
-    // Remove devWarning if needed
-    if (rule.test.test('test.tsx')) {
-      rule.use = [
-        ...rule.use,
-        {
-          loader: 'string-replace-loader',
-          options: {
-            search: 'devWarning(',
-            replace: "if (process.env.NODE_ENV !== 'production') devWarning(",
-          },
-        },
-      ];
-    }
-  });
-}
-
 function processWebpackThemeConfig(themeConfig, theme, vars) {
   themeConfig.forEach(config => {
     ignoreMomentLocale(config);
@@ -132,10 +114,6 @@ const webpackVariableConfig = injectLessVariables(getWebpackConfig(false), {
   'root-entry-name': 'variable',
 });
 
-webpackConfig.forEach(config => {
-  injectWarningCondition(config);
-});
-
 if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach(config => {
     ignoreMomentLocale(config);