chore: small bundle size (#24135)

* update warning

* rm warning

* replace with dev warning

* fix test

* fix site

* Update webpack.config.js

Co-authored-by: 偏右 <afc163@gmail.com>

* Update webpack.config.js

* fix sytax

* adjust

* move into function

Co-authored-by: 偏右 <afc163@gmail.com>

components/_util/devWarning.ts

@@ -0,0 +1,7 @@
+import devWarning, { resetWarned } from 'rc-util/lib/warning';
+
+export { resetWarned };
+
+export default (valid: boolean, component: string, message: string): void => {
+  devWarning(valid, `[antd: ${component}] ${message}`);
+};

components/_util/warning.ts

@@ -1,7 +0,0 @@
-import warning, { resetWarned } from 'rc-util/lib/warning';
-
-export { resetWarned };
-
-export default (valid: boolean, component: string, message: string): void => {
-  warning(valid, `[antd: ${component}] ${message}`);
-};

components/auto-complete/index.tsx

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import Select, { InternalSelectProps, OptionType } from '../select';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 const { Option } = Select;
 
@@ -25,7 +25,10 @@ export interface DataSourceItemObject {
 export type DataSourceItemType = string | DataSourceItemObject;
 
 export interface AutoCompleteProps
-  extends Omit<InternalSelectProps<string>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'> {
+  extends Omit<
+    InternalSelectProps<string>,
+    'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'
+  > {
   dataSource?: DataSourceItemType[];
 }
 
@@ -90,13 +93,13 @@ const AutoComplete: React.RefForwardingComponent<Select, AutoCompleteProps> = (p
 
   // ============================ Warning ============================
   React.useEffect(() => {
-    warning(
+    devWarning(
       !('dataSource' in props),
       'AutoComplete',
       '`dataSource` is deprecated, please use `options` instead.',
     );
 
-    warning(
+    devWarning(
       !customizeInput || !('size' in props),
       'AutoComplete',
       'You need to control style self instead of setting `size` when using customize input.',

components/avatar/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 export interface AvatarProps {
   /** Shape of avatar, options:`circle`, `square` */
@@ -109,7 +109,7 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
       ...others
     } = this.props;
 
-    warning(
+    devWarning(
       !(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`,

components/breadcrumb/Breadcrumb.tsx

@@ -6,7 +6,7 @@ import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import Menu from '../menu';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { Omit } from '../_util/type';
 
 export interface Route {
@@ -130,7 +130,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
           return element;
         }
 
-        warning(
+        devWarning(
           element.type &&
             (element.type.__ANT_BREADCRUMB_ITEM === true ||
               element.type.__ANT_BREADCRUMB_SEPARATOR === true),

components/button/button.tsx

@@ -7,7 +7,7 @@ import Group from './button-group';
 import { ConfigContext } from '../config-provider';
 import Wave from '../_util/wave';
 import { Omit, tuple } from '../_util/type';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import LoadingIcon from './LoadingIcon';
 
@@ -186,7 +186,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     ...rest
   } = props;
 
-  warning(
+  devWarning(
     !(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`,

components/cascader/index.tsx

@@ -14,7 +14,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import Input from '../input';
 import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 
 export interface CascaderOptionType {
@@ -211,7 +211,7 @@ const defaultDisplayRender = (label: string[]) => label.join(' / ');
 function warningValueNotExist(list: CascaderOptionType[], fieldNames: FieldNamesType = {}) {
   (list || []).forEach(item => {
     const valueFieldName = fieldNames.value || 'value';
-    warning(valueFieldName in item, 'Cascader', 'Not found `value` in `options`.');
+    devWarning(valueFieldName in item, 'Cascader', 'Not found `value` in `options`.');
     warningValueNotExist(item[fieldNames.children || 'children'], fieldNames);
   });
 }
@@ -384,7 +384,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         return matchCount >= limit;
       });
     } else {
-      warning(
+      devWarning(
         typeof limit !== 'number',
         'Cascader',
         "'limit' of showSearch should be positive number or false.",

components/checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
 import CheckboxGroup, { GroupContext } from './Group';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -60,7 +60,7 @@ class Checkbox extends React.PureComponent<CheckboxProps, {}> {
     const { value } = this.props;
     this.context?.registerValue(value);
 
-    warning(
+    devWarning(
       'checked' in this.props || this.context || !('value' in this.props),
       'Checkbox',
       '`value` is not a valid prop, do you mean `checked`?',

components/checkbox/__tests__/checkbox.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Checkbox from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { resetWarned } from '../../_util/warning';
+import { resetWarned } from '../../_util/devWarning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 

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/warning';
+import { resetWarned } from '../../_util/devWarning';
 
 describe('Descriptions', () => {
   mountTest(Descriptions);

components/descriptions/index.tsx

@@ -7,7 +7,7 @@ import ResponsiveObserve, {
   ScreenMap,
   responsiveArray,
 } from '../_util/responsiveObserve';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { ConfigContext } from '../config-provider';
 import Row from './Row';
 import DescriptionsItem from './Item';
@@ -49,7 +49,7 @@ function getFilledItem(
     clone = React.cloneElement(node, {
       span: rowRestCol,
     });
-    warning(
+    devWarning(
       span === undefined,
       'Descriptions',
       'Sum of column `span` in a line not match `column` of Descriptions.',

components/dropdown/dropdown.tsx

@@ -5,7 +5,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 
 import DropdownButton from './dropdown-button';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { tuple } from '../_util/type';
 
 const Placements = tuple(
@@ -88,7 +88,7 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
     const overlayProps = overlayNode.props;
 
     // Warning if use other mode
-    warning(
+    devWarning(
       !overlayProps.mode || overlayProps.mode === 'vertical',
       'Dropdown',
       `mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`,

components/form/FormItem.tsx

@@ -8,7 +8,7 @@ import omit from 'omit.js';
 import Row from '../grid/row';
 import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import FormItemLabel, { FormItemLabelProps } from './FormItemLabel';
 import FormItemInput, { FormItemInputProps } from './FormItemInput';
 import { FormContext, FormItemContext } from './context';
@@ -51,7 +51,7 @@ export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, R
 
 function hasValidName(name?: NamePath): Boolean {
   if (name === null) {
-    warning(false, 'Form.Item', '`null` is passed as `name` property');
+    devWarning(false, 'Form.Item', '`null` is passed as `name` property');
   }
   return !(name === undefined || name === null);
 }
@@ -285,27 +285,27 @@ function FormItem(props: FormItemProps): React.ReactElement {
 
         let childNode: React.ReactNode = null;
         if (Array.isArray(children) && hasName) {
-          warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
+          devWarning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
           childNode = children;
         } else if (isRenderProps && (!shouldUpdate || hasName)) {
-          warning(
+          devWarning(
             !!shouldUpdate,
             'Form.Item',
             '`children` of render props only work with `shouldUpdate`.',
           );
-          warning(
+          devWarning(
             !hasName,
             'Form.Item',
             "Do not use `name` with `children` of render props since it's not a field.",
           );
         } else if (dependencies && !isRenderProps && !hasName) {
-          warning(
+          devWarning(
             false,
             'Form.Item',
             'Must set `name` or use render props when `dependencies` is set.',
           );
         } else if (React.isValidElement(children)) {
-          warning(
+          devWarning(
             children.props.defaultValue === undefined,
             'Form.Item',
             '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.',
@@ -334,7 +334,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
         } else if (isRenderProps && shouldUpdate && !hasName) {
           childNode = (children as RenderChildren)(context);
         } else {
-          warning(
+          devWarning(
             !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.',

components/form/FormList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { List } from 'rc-field-form';
 import { StoreValue } from 'rc-field-form/lib/interface';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 interface FieldData {
   name: number;
@@ -21,12 +21,15 @@ interface FormListProps {
 }
 
 const FormList: React.FC<FormListProps> = ({ children, ...props }) => {
-  warning(!!props.name, 'Form.List', 'Miss `name` prop.');
+  devWarning(!!props.name, 'Form.List', 'Miss `name` prop.');
 
   return (
     <List {...props}>
       {(fields, operation) => {
-        return children(fields.map(field => ({ ...field, fieldKey: field.key })), operation);
+        return children(
+          fields.map(field => ({ ...field, fieldKey: field.key })),
+          operation,
+        );
       }}
     </List>
   );

components/form/index.tsx

@@ -3,7 +3,7 @@ import InternalForm, { useForm, FormInstance, FormProps } from './Form';
 import Item, { FormItemProps } from './FormItem';
 import List from './FormList';
 import { FormProvider } from './context';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 type InternalForm = typeof InternalForm;
 interface Form extends InternalForm {
@@ -23,7 +23,7 @@ Form.List = List;
 Form.useForm = useForm;
 Form.Provider = FormProvider;
 Form.create = () => {
-  warning(
+  devWarning(
     false,
     'Form',
     'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.',

components/icon/index.tsx

@@ -1,7 +1,7 @@
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 const Icon = () => {
-  warning(false, 'Icon', 'Empty Icon');
+  devWarning(false, 'Icon', 'Empty Icon');
   return null;
 };
 

components/input/Input.tsx

@@ -9,7 +9,7 @@ import { Omit, LiteralUnion } from '../_util/type';
 import ClearableLabeledInput, { hasPrefixSuffix } from './ClearableLabeledInput';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
@@ -153,7 +153,7 @@ class Input extends React.Component<InputProps, InputState> {
 
   getSnapshotBeforeUpdate(prevProps: InputProps) {
     if (hasPrefixSuffix(prevProps) !== hasPrefixSuffix(this.props)) {
-      warning(
+      devWarning(
         this.input !== document.activeElement,
         '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`,

components/locale-provider/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ValidateMessages } from 'rc-field-form/lib/interface';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 import { ModalLocale, changeConfirmLocale } from '../modal/locale';
 import { TransferLocale as TransferLocaleForEmpty } from '../empty';
@@ -51,7 +51,7 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     super(props);
     changeConfirmLocale(props.locale && props.locale.Modal);
 
-    warning(
+    devWarning(
       props._ANT_MARK__ === ANT_MARK,
       'LocaleProvider',
       '`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale',

components/menu/__tests__/index.test.js

@@ -12,7 +12,7 @@ import Layout from '../../layout';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { resetWarned } from '../../_util/warning';
+import { resetWarned } from '../../_util/devWarning';
 
 const { SubMenu } = Menu;
 

components/menu/index.tsx

@@ -5,7 +5,7 @@ import omit from 'omit.js';
 import SubMenu from './SubMenu';
 import Item from './MenuItem';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { SiderContext, SiderContextProps } from '../layout/Sider';
 import raf from '../_util/raf';
 import collapseMotion from '../_util/motion';
@@ -120,13 +120,13 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
   constructor(props: InternalMenuProps) {
     super(props);
 
-    warning(
+    devWarning(
       !('inlineCollapsed' in props && props.mode !== 'inline'),
       'Menu',
       '`inlineCollapsed` should only be used when `mode` is inline.',
     );
 
-    warning(
+    devWarning(
       !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
       'Menu',
       '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
@@ -197,7 +197,7 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
     }
 
     if (openAnimation) {
-      warning(
+      devWarning(
         typeof openAnimation === 'string',
         'Menu',
         '`openAnimation` do not support object. Please use `motion` instead.',

components/modal/ConfirmDialog.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import Dialog, { ModalFuncProps } from './Modal';
 import ActionButton from './ActionButton';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -29,7 +29,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     cancelButtonProps,
   } = props;
 
-  warning(
+  devWarning(
     !(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`,

components/result/index.tsx

@@ -6,7 +6,7 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import WarningFilled from '@ant-design/icons/WarningFilled';
 
 import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 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`);
 
-  warning(
+  devWarning(
     !(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`,

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/warning';
+import { resetWarned } from '../../_util/devWarning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 

components/switch/index.tsx

@@ -7,7 +7,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 warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 export type SwitchSize = 'small' | 'default';
 export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
@@ -36,7 +36,7 @@ interface CompoundedComponent
 }
 
 const Switch = React.forwardRef<unknown, SwitchProps>((props, ref) => {
-  warning(
+  devWarning(
     'checked' in props || !('value' in props),
     'Switch',
     '`value` is not a valid prop, do you mean `checked`?',

components/table/Table.tsx

@@ -35,7 +35,7 @@ import defaultLocale from '../locale/en_US';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 
 export { ColumnsType, TablePaginationConfig };
@@ -315,7 +315,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     // Dynamic table data
     if (mergedData.length < total!) {
       if (mergedData.length > pageSize) {
-        warning(
+        devWarning(
           false,
           'Table',
           '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',

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/warning';
+import { resetWarned } from '../../_util/devWarning';
 
 describe('Table.pagination', () => {
   const columns = [

components/table/__tests__/Table.rowSelection.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount, render } from 'enzyme';
 import Table from '..';
 import Checkbox from '../../checkbox';
-import { resetWarned } from '../../_util/warning';
+import { resetWarned } from '../../_util/devWarning';
 import ConfigProvider from '../../config-provider';
 
 describe('Table.rowSelection', () => {

components/table/hooks/useSelection.tsx

@@ -6,7 +6,7 @@ import Checkbox, { CheckboxProps } from '../../checkbox';
 import Dropdown from '../../dropdown';
 import Menu from '../../menu';
 import Radio from '../../radio';
-import warning from '../../_util/warning';
+import devWarning from '../../_util/devWarning';
 import {
   TableRowSelection,
   Key,
@@ -178,7 +178,7 @@ export default function useSelection<RecordType>(
             const keys = Array.from(keySet);
             setSelectedKeys(keys);
             if (onSelectInvert) {
-              warning(
+              devWarning(
                 false,
                 'Table',
                 '`onSelectInvert` will be removed in future. Please use `onChange` instead.',
@@ -215,7 +215,7 @@ export default function useSelection<RecordType>(
           process.env.NODE_ENV !== 'production' &&
           ('checked' in checkboxProps || 'defaultChecked' in checkboxProps)
         ) {
-          warning(
+          devWarning(
             false,
             'Table',
             'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',

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/warning';
+import { resetWarned } from '../../_util/devWarning';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('TimePicker', () => {

components/time-picker/index.tsx

@@ -2,7 +2,7 @@ import { Moment } from 'moment';
 import * as React from 'react';
 import DatePicker from '../date-picker';
 import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { Omit } from '../_util/type';
 
 const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
@@ -30,7 +30,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
         return renderExtraFooter;
       }
       if (addon) {
-        warning(
+        devWarning(
           false,
           'TimePicker',
           '`addon` is deprecated. Please use `renderExtraFooter` instead.',

components/tree-select/index.tsx

@@ -9,7 +9,7 @@ import RcTreeSelect, {
 import classNames from 'classnames';
 import omit from 'omit.js';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { AntTreeNodeProps } from '../tree';
 import getIcons from '../select/utils/iconUtil';
 import renderSwitcherIcon from '../tree/utils/iconUtil';
@@ -55,7 +55,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
   constructor(props: TreeSelectProps<T>) {
     super(props);
 
-    warning(
+    devWarning(
       props.multiple !== false || !props.treeCheckable,
       'TreeSelect',
       '`multiple` will alway be `true` when `treeCheckable` is true',

components/typography/Base.tsx

@@ -11,7 +11,7 @@ import ResizeObserver from 'rc-resize-observer';
 import { ConfigConsumerProps, configConsumerProps } from '../config-provider';
 import { withConfigConsumer } from '../config-provider/context';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import TransButton from '../_util/transButton';
 import raf from '../_util/raf';
 import isStyleSupport from '../_util/styleChecker';
@@ -111,7 +111,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
   static getDerivedStateFromProps(nextProps: BlockProps) {
     const { children, editable } = nextProps;
 
-    warning(
+    devWarning(
       !editable || typeof children === 'string',
       'Typography',
       'When `editable` is enabled, the `children` should use string.',
@@ -296,7 +296,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
     // Do not measure if css already support ellipsis
     if (this.canUseCSSEllipsis()) return;
 
-    warning(
+    devWarning(
       toArray(children).every((child: React.ReactNode) => typeof child === 'string'),
       'Typography',
       '`ellipsis` should use string as children only.',

components/typography/Text.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import Base, { BlockProps } from './Base';
 
 export interface TextProps extends BlockProps {
@@ -7,7 +7,7 @@ export interface TextProps extends BlockProps {
 }
 
 const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
-  warning(
+  devWarning(
     typeof ellipsis !== 'object',
     'Typography.Text',
     '`ellipsis` only supports boolean value.',

components/typography/Title.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import warning from 'warning';
+import devWarning from '../_util/devWarning';
 import Base, { BlockProps } from './Base';
 import { tupleNum, Omit } from '../_util/type';
 
@@ -14,7 +14,7 @@ const Title: React.FC<TitleProps> = props => {
   if (TITLE_ELE_LIST.indexOf(level) !== -1) {
     component = `h${level}`;
   } else {
-    warning(false, 'Title only accept `1 | 2 | 3 | 4` as `level` value.');
+    devWarning(false, 'Typography.Title', 'Title only accept `1 | 2 | 3 | 4` as `level` value.');
     component = 'h1';
   }
 

components/typography/Typography.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 import { composeRef } from '../_util/ref';
 
 export interface TypographyProps {
@@ -34,7 +34,7 @@ const Typography: React.RefForwardingComponent<{}, InternalTypographyProps> = (
   let mergedRef = ref;
 
   if (setContentRef) {
-    warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
+    devWarning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
     mergedRef = composeRef(ref, setContentRef);
   }
 

components/typography/__tests__/index.test.js

@@ -61,7 +61,7 @@ describe('Typography', () => {
       mount(<Title level={false} />);
 
       expect(errorSpy).toHaveBeenCalledWith(
-        'Warning: Title only accept `1 | 2 | 3 | 4` as `level` value.',
+        'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4` as `level` value.',
       );
     });
   });

components/upload/Upload.tsx

@@ -17,7 +17,7 @@ import { T, fileToObject, getFileItem, removeFileItem } from './utils';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import devWarning from '../_util/devWarning';
 
 export { UploadProps };
 
@@ -61,7 +61,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
       dragState: 'drop',
     };
 
-    warning(
+    devWarning(
       'fileList' in props || !('value' in props),
       'Upload',
       '`value` is not a valid prop, do you mean `fileList`?',

components/upload/__tests__/upload.test.js

@@ -5,7 +5,7 @@ import Upload from '..';
 import Form from '../../form';
 import { T, fileToObject, getFileItem, removeFileItem } from '../utils';
 import { setup, teardown } from './mock';
-import { resetWarned } from '../../_util/warning';
+import { resetWarned } from '../../_util/devWarning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 

package.json

@@ -257,6 +257,7 @@
     "rimraf": "^3.0.0",
     "scrollama": "^2.0.0",
     "simple-git": "^2.0.0",
+    "string-replace-loader": "^2.3.0",
     "stylelint": "^13.0.0",
     "stylelint-config-prettier": "^8.0.0",
     "stylelint-config-rational-order": "^0.1.2",

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/warning';
+import warning from '../../../../components/_util/devWarning';
 
 const IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_1329669_t1u72b9zk8s.js',

site/theme/template/Icon/utils.js

@@ -1,4 +1,4 @@
-import warning from '../../../../components/_util/warning';
+import warning from '../../../../components/_util/devWarning';
 
 // 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
@@ -27,10 +27,7 @@ export function getThemeFromTypeName(type) {
 }
 
 export function removeTypeTheme(type) {
-  return type
-    .replace(fillTester, '')
-    .replace(outlineTester, '')
-    .replace(twoToneTester, '');
+  return type.replace(fillTester, '').replace(outlineTester, '').replace(twoToneTester, '');
 }
 
 export function withThemeSuffix(type, theme) {

webpack.config.js

@@ -34,10 +34,29 @@ 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);
     externalMoment(config);
+    injectWarningCondition(config);
 
     // rename default entry to ${theme} entry
     Object.keys(config.entry).forEach(entryName => {
@@ -79,6 +98,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
     if (process.env.ESBUILD) {
       config.optimization.minimizer[0] = new EsbuildPlugin();
     }
+
     // skip codesandbox ci
     if (!process.env.CSB_REPO) {
       config.plugins.push(