A17 React+AntDesign AntDesignUI框架 css样式按需引入

官方文档参考

Antd中使用高级配置，按需引入css样式

步骤：

Ⅰ、$ yarn add react-app-rewired customize-cra / $ 1、cnpm install react-app-rewired --save  2、$ cnpm install customize-cra --save 

　　引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

　　$ yarn add react-app-rewired customize-cra

　　/* 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",
　　}

Ⅱ、然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

　　module.exports = function override(config, env) {
  　　　　// do stuff with the webpack config...
 　　　　 return config;
　　　　};

Ⅲ、使用 babel-plugin-import

注意：antd 默认支持基于 ES module 的 tree shaking，js 代码部分不使用这个插件也会有按需加载的效果。

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import / cnpm install babel-plugin-import --save

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

　　- module.exports = function override(config, env) {
　　-   // do stuff with the webpack config...
　　-   return config;
　　- };
　　+ module.exports = override(
　　+   fixBabelImports('import', {
　　+     libraryName: 'antd',
　　+     libraryDirectory: 'es',
　　+     style: 'css',
　　+   }),
　　+ );

Ⅳ、然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

  // src/App.js
  import React, { Component } from 'react';
- import Button from 'antd/es/button';
+ import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

  export default App;

Ⅴ、最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载

====================================================================================

至此 A系列入门学习完结