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样式那些,因为在引入的包中自带了样式代码,并且仅仅自带了卡片的样式代码,这就是按需加载,大大降低了浏览器的承载力,如图: