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');