create-react-app同时对多个框架(antd+antd-mobile)做按需加载的方法

最新推荐文章于 2023-09-01 15:13:33 发布

RaoMeng1995

最新推荐文章于 2023-09-01 15:13:33 发布

阅读量1.1k

点赞数

分类专栏： React 文章标签： React antd antd-mobile 按需加载

本文链接：https://blog.csdn.net/RaoMeng1995/article/details/87360227

版权

本文介绍了如何在基于create-react-app的React项目中，使用babel-plugin-import实现antd和antd-mobile两个框架的按需加载，以提高页面性能。通过修改package.json，创建config-overrides.js并重写配置，可以分别针对每个框架配置按需加载。

摘要由CSDN通过智能技术生成

在React项目开发中，经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时，框架内的各种资源文件数量巨大，这时，如果我们在每次使用框架时，都将框架内所有资源都全部加载的话，这将使得页面的性能大大降低。这时，我们就需要对这些庞大的第三方框架做按需加载了。

首先介绍下对单个框架做按需加载的方法

其实在使用create-react-app脚手架的情况下，对单个框架做按需加载的方法，网上的相关文章已经很多了，我这里只简单的介绍下。常用的方法就是通过babel-plugin-import来实现按需加载，并通过react-app-rewired来重写项目配置文件，将babel-plugin-import写入配置。

1、安装

cnpm install babel-plugin-import --dev

cnpm install react-app-rewired --dev

2、修改package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}
<