因此,我决定使用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的空间可供用户下载。并记住在服务捆绑包时使用压缩。