项目中按需加载Antd

 

按需加载Antd：

前提：

create-react-app react-demo

cd react-demo

 

第一步：安装并在项目中引入 Button,如下代码

npm install antd --save

npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

import React, { Component } from 'react';
import { Button } from "antd";

class AntdTest extends Component {

    render() {
        return (
            <Button type="primary">按钮</Button>
            
        );
    }
}

export default AntdTest;

第二步：根目录下新建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;

}

第三步：修改package.json

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test",

"eject": "react-app-rewired eject"

},

第四步：在app.js中导入组件AntdTest  或直接在app.js里导入Button组件
 

import React from 'react';
import './App.css';
import AntdTest from './components/AntdTest'

function App() {
  return (
    <div className="App">
      <AntdTest />
    </div>
  );
}

export default App;

第五步：重启，查看效果