因此,我决定使用react,并在其之上进行操作。以为会很酷。我正在用webpack打包所有东西,我的捆绑包大小约为2.8 MB卡尔!

即使我从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
      ]
  }


更新,没有蚂蚁我的反应包只有118kb

最佳答案

好消息是您不需要任何插件或复杂的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 MB的捆绑包,您只有221kb的空间可供用户下载。并记住在服务捆绑包时使用压缩。

10-05 20:41
查看更多