react 按需引入 Ant Design

如果不按需引入,项目大的情况下会影响性能,启动速度慢,
需要对create-react-app 默认配置进行自定义 使用 react-app-rewired
安装 react-app-rewired

        npm install react-app-rewired customize-cra --save 

修改package.json, 把原来scripts里面的配置删掉,换成下面的

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

在根目录下面创建一个 config-overrides.js 文件,用于修改默认配置

   const { override, fixBabelImports } = require('customize-cra');

   module.exports = override(
       fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: 'css'
     })
   );

安装 babel-plugin-import 插件,用于按需加载组件代码和样式
最后再需要用的Ant Design 的页面中引入模块即可

import React from 'react';
import { Button } from 'antd'; //按需引入即可
function App() {
  return (
    <div className="App">
     
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

你可能感兴趣的:(React)