antd 引入一个Spin组件，打包一些没有用到的文件，导致文件体积过大

[BernardZhang]

1. 使用babel-plugin-import 配置打包，组件中只引入了Spin组件，引入代码如下：
   import {Spin} from 'antd';

2. .babelrc、 webpack配置如下：

{
    "presets": ["env"],
    "plugins": [
        "transform-object-rest-spread",
        "transform-react-jsx",
        [
            "import", 
            { "libraryName": "antd", "style": true }
        ]
    ]
}
![image](https://user-images.githubusercontent.com/3273449/64872443-ce2db680-d679-11e9-8cc0-36f656afbae3.png)

3. 打包的buddle有300多K, 观察sourcemap发现moment以及一些不必要的库文件被打包进来了

4. webpack打包分析图
   

期望结果是：只打包Spin组件相关的文件，而不要打包无关的文件。

[afc163]

可能需要把相关代码从 ConfigProvider 里独立出来：

https://github.com/ant-design/ant-design/blob/56abebfb3c7adac31bd27ae0be8f831a6ae0a319/components/spin/index.tsx#L6

@zombieJ

[afc163]

楼主可以试试 "libraryDirectory": "es"

[BernardZhang]

楼主可以试试 "libraryDirectory": "es"

@afc163
试过了依然会把moment等模块打包进去，同时试了直接手动引入指定模块也同样存在该问题：
import Spin from 'antd/lib/Spin';

[afc163]

链路现在是这样的 spin => ConfigProvider => moment，确实有问题。

看起来 tree-shaking 也没有生效。

[BernardZhang]

链路现在是这样的 spin => ConfigProvider => moment，确实有问题。

看起来 tree-shaking 也没有生效。

嗯 试了简单的Button组件也是会把moment打包进去，貌似是moment都必然被打包进去了，而且moment这个库体积很大，目前有没有方案来避免这种情况呢？

[zombieJ]

ConfigProvider 合并 LocaleProvider 后，是否有用到 locale 是运行时的，依赖还是算上 LocaleProvider。感觉如果不剥离 moment 没什么好办法。

[afc163]

分开试试？

import { ConfigConsumer } from '../config-provider';
import { ConfigConsumerWithLocale } from '../config-provider/withLocale';
import { ConfigConsumerWithLocaleAndMoment } from '../config-provider/withLocaleAndMoment';

[afc163]

ant-design/ant-design#19115

[janlukasschroeder]

I reduced my bundle size by 500KB by editing config-override.js like so:

config-override.js

const { override, fixBabelImports } = require('customize-cra');
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./src/icons.js

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

Before

After