19 React——Ant Design（按需加载样式文件）

      在上篇文章中我们简单介绍了Ant Design组件的使用，但是在使用过程中我们在样式文件中直接加载了全部的Antd样式文件，这对于前端页面来说并不符合其开发要求，接下来我们介绍css样式文件的按需加载。

1 首先，我们需要在项目文件中安装自定义配置的工具。在项目文件夹中打开命令行工具，输入“npm install react-app-rewired --save”，如图：

2 然后修改package.json文件中的配置，如图：

3 修改完配置后在项目的根目录下新建一个名为“config-overrides.js”文件，先不要在此文件中添加任何代码，放置在此处。

4 然后安装按需加载组件代码和样式的babel插件。在命令行中输入“npm install babel-plugin-import --save”如图：

5 最后，在刚才新建的js文件中添加如下的代码，如图：

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(
        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
    );
    return config;
};

6 我们删除之前在index.css文件头部添加的“@import '~antd/dist/antd.css';”这行代码，重新启动项目。如图：

7 此时，按需加载环境已经配好，我们需要组件时，只需在相关文件中引入此组件的包，然后实例化此组件即可。例如，我们在主页组件中添加一个卡片，我们只需引入Card的包，然后粘贴官网代码即可，并不需要在引入css样式那些，因为在引入的包中自带了样式代码，并且仅仅自带了卡片的样式代码，这就是按需加载，大大降低了浏览器的承载力，如图：