antd按需加载

欢迎关注微信公众号：【 全栈攻略 】

如：import { Button } from ‘antd’; 的写法是引入了 antd 下所有的模块，这会影响应用的网络性能。

一，可以通过以下的写法来按需加载组件。

import Button from 'antd/es/button';
import 'antd/es/button/style'; // 或者 antd/es/button/style/css 加载 css 文件

二，可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

import { Button } from 'antd';

这时我们需要配置一下 .babelrc 文件

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ] 
}

至此，配置完成，我们就不需要全局加载 import 'antd/dist/antd.css';

PS：未来的你，一定会感谢今天拼命努力的自己！