当我只使用 3 个组件时，Antd 的 2.7 mb budle 大小答案

【问题标题】：Antd 2.7 mb budle size when i use only 3 components当我只使用 3 个组件时，Antd 的 2.7 mb budle 大小
【发布时间】：2019-08-08 10:01:39
【问题描述】：

所以我决定在它之上使用 react 和 antd。想法会很酷。我正在用 webpack 打包所有东西，我的包大小约为 2.8 MB Carl！

即使我从 antd 导入一个小复选框，它仍然是相同的包大小。它将整个 antd 导入到一个项目中。我的假设是它不应该这样做。

我使用了 babel-import-plugin，它确实将包大小减少到 2.3 兆字节，但在现实世界中仍然不能接受。

import React from 'react';
import ReactDOM from 'react-dom';
import {Checkbox} from 'antd';
import 'antd/dist/antd.less';

class HelloWorld extends React.Component{
    render(){
        return (
            <h1>Hello React</h1>
        )
    }
}

function trig(){
    console.log("Changed");
}

ReactDOM.render(<Checkbox onChange={trig}>Click Me</Checkbox>, document.getElementById("app"));

所以要做到这一点就需要 2.3 兆字节的代码？

.babelrc

{
    "plugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
        // `style: true` for less
      ]
  }

更新，没有 antd 我的 react 包只有 118kb

【问题讨论】：

检查这个问题：stackoverflow.com/questions/48721290/ant-design-huge-imports
第二个猜测：antd 很大，但不是那么大。你确定你打开了缩小？
@DaydreamingDuck 我已经尝试了该帖子中的方法，安装了插件，但它仍然包含整个内容。其次，是的，我已经最小化了。

标签： reactjs webpack antd

【解决方案1】：

好消息是您不需要任何插件或复杂的 webpack 插件/加载器/魔术。您所要做的就是直接从 components 文件夹中导入！

所以不要这样做

import Checkbox from 'antd';

或者

import { Checkbox } from 'antd';

您必须指定单个组件位置！

import Checkbox from 'antd/es/checkbox';

这里有几件事要注意，要进一步缩小你需要以下几点：

1) 使用名为 'import' 的 babel 插件有很大帮助。 npm install babel-plugin-import

2) 使用 webpack 优化！ optimization: {minimize: true}

所以现在，Carl 不再有 2.8 兆字节的文件放在您的捆绑包中，而是只有 221kb 供用户下载。并记住在提供捆绑包时使用压缩。

【讨论】：