antd按需加载,react按需加载


如: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:未来的你,一定会感谢今天拼命努力的自己!
文章最后发布于: 2019-10-22 11:35:00

相关内容

    暂无相关文章