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

原创 野人  2021-10-19 09:01  阅读 37 次

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

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

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

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

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

第一步:yarn add babel-plugin-import -D 或者 npm i babel-plugin-import -D

第二步;修改craco.config.js配置内容如下:

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

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

本文地址:http://www.yerenwz.com/4870.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论