使用create-react-app创建的项目引入了Ant Design里面的组件怎么实现按需加载？

是啊，现在前端也是非常重视性能得优化，良好的性能优化，带来好的用户体验，体验度上来多了，用户使用的效果就好了，间接也给公司带来了收益，所以学习性能优化也必须要有的。

因为之前也不太懂，也不太重视这块，所以就没有过多的折腾，近来也是因为有客户反馈了，自己目前事情也不是非常多，想着还是多学点。

废话不扯了，直接上教程。

对了，目前所有的配置文件，都是基于craco.config.js来修改，如果你不是使用craco来修改的话，可以看下之前《使用create-react-app创建的项目，怎么设置才能支持less文件？》这篇文件，里面有讲到怎么安装craco和怎么支持less的文件等。

不过，其实本质上craco修改的配置的文件，最终也是会合并到webpack里面的配置项，因为最终的打包都是由webpack来完成的。

第一步：yarn add babel-plugin-import -D 或者 pm i babel-plugin-import -D

第二步；修改craco.config.js配置内容如下：

module.exports = {
    babel: {
        //支持装饰器
        plugins: [
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: 'css', //设置为true即是less 这里用的是css
                },
            ],
        ],
    }
};

这样设置完之后，就能实现Ant Design里面的组件按需加载了。