arco-design 按需加载配置
说明
arco-design是字节跳动开源的全面开源的企业级产品设计系统，支持Vue和React，本文介绍的是React版本按需加载方式
资源地址
github:arco-design
官方文档：文档
问题
使用 create-react-app 创建的app配置项默认都是隐藏的，当然有提供eject命令显示所有配置，但是为了不破环默认配置项。我们尽量不要在默认的文件里修改,接下来介绍两种方式
方式一：react-app-rewired
方式二：craco
方式一
由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra
安装依赖
npm install react-app-rewired customize-cra -D # or yarn add react-app-rewired customize-cra -D 复制代码
修改script启动命令
/* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", } 复制代码创建配置文件
在项目更目录下创建config-overrides.js文件
⚠️style: "css", 样式按需加载,文档里面是true是无效的，需要改为css
// config-overrides.js const { override, fixBabelImports } = require("customize-cra"); module.exports = { webpack: override( fixBabelImports("import", { libraryName: "@arco-design/web-react", libraryDirectory: "es", camel2DashComponentName: false, style: "css", // 样式按需加载,文档里面是true是无效的，需要改为css }), }; 复制代码然后重新启动就可以了
方式二
安装依赖
npm install @craco/craco -D # or yarn add @craco/craco -D 复制代码
修改script启动命令
/* package.json */ "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", } 复制代码创建配置文件
在项目更目录下创建craco-config.js文件
⚠️style: "css", 样式按需加载,文档里面是true是无效的，需要改为css
// craco-config.js module.exports = { babel: { plugins: [ [ "import", { libraryName: "@arco-design/web-react", libraryDirectory: "es", camel2DashComponentName: false, style: "css", // 样式按需加载 }, ], ], }, }; 复制代码然后重新启动就可以了
作者：蜗牛前端
链接：https://juejin.cn/post/7025793253114904613