react 项目中按需加载 antd

初次接触 react 和 antd,如有不对的地方请谅解.

安装 antd

yarn add antd

在 app.js 中使用:

import { Button } from 'antd';

这时浏览器会有提示信息:

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

意味着我们是在全量引入 antd,这样会对网络请求与性能有一定的影响,这里我们借助babel-plugin-import来按需加载 antd.

安装 babel-plugin-import

yarn add babel-plugin-import

暴露 react-app 配置文件

使用 yarn reject来暴露项目配置文件.

配置 package.json

修改项目根目录下的 package.json文件:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

按需引入

在 app.js 中按需引入:

import { Button } from "antd";