ant-design按需加载

名词解释

• 通常我们在conatiner中引入一个ant-design的component都会使用import将组件引入，引入方式有以下两种：

  • import {DatePicker} from 'antd'
  • import DatePicker from 'antd/lib/date-picker'

• 两种引入方式的区别：

  • 使用第一种方式会将antd整个依赖模块全部加载进来
  • 使用第二种方式会将antd中需要的组件加载进来
  • 第二种方式效率高但是会导致如果你的container中引入了许多Component那么就要写很很多行

    import Form from 'antd/lib/form'
    import Select from 'antd/lib/select'
    import Input from 'antd/lib/input'
    import Checkbox from 'antd/lib/checkbox'
    import Radio from 'antd/lib/radio'
    import DatePicker from 'antd/lib/date-picker'
    
    //第一种
    import {Form, Select, Checkbox, Radio, DatePiceker} from 'antd/lib/form'
  
  

• 因此为了中和两个方式的优缺点antd制定了插件babel-plugin-import

使用babel-plugin-import插件

• 前提：你的项目必须使用了babel，在项目中包含一个.babelrc的配置文件
• 用法：
  • 安装npm install babel-plugin-import --save-dev
  • 在babelrc中配置：

    {
      "plugins": [["import", { "libraryName": "antd" }]]
    }
    //作用
    import { Button } from 'antd';
    //变成
    var _button = require('antd/lib/button');
    
    
    
    
    //还可以同时引入ant-design less样式
    {
      "plugins": [["import", { "libraryName": "antd",style: true }]]
    }
    //使用之前
    import Button from 'antd/lib/button';
    import 'antd/lib/date-picker/style/css';
    //使用之后
    import {Button} from 'antd';
    //相当于
    var _button = require('antd/lib/button');
    require('antd/lib/button/style');