问题描述

• 使用 antd库时
• 使用按钮,须导入如下

import Button from 'antd/lib/button'
import 'antd/dist/antd.css'

• 这样会导入全局的样式.

解决方案,配置按需加载

• 1.安装 react-app-rewired取代 react-scripts, 可以扩展webapack 的配置, 类似vue.config.js
• npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save
• /config-overrides.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;
}

• 2.改启动脚本
• /package.json
• 将"scripts"中的 react-scripts 全部改为 react-app-rewired

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

• 3.使用按需导入

// import Button from 'antd/lib/button'
// import 'antd/dist/antd.css'
import { Button } from 'antd'