組件庫按需加載 藉助babel-plugin-import實現

對於大中型前端項目爲了解耦與複用，更多的公司會選擇本身封裝組件庫，那麼一次引入整個組件庫必然致使項目過大，如何按需加載則必需要作

前世 ant-design的babel插件babel-plugin-import

1. 原理 [git項目地址](https://github.com/ant-design/babel-plugin-import) 在babel轉碼的時候，把整個庫‘antd’的引用，變爲'antd/lib/button'具體模塊的引用。這樣webpack收集依賴module就不是整個antd，而是裏面的button.

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);
複製代碼

此生

那麼天然咱們的組件也能夠一樣的處理，以anole-lego爲例

1. 配置 babel-loader

// 編譯添加
  include: [
    path.resolve(appDirectory, 'node_modules/anole-lego'),
    //...others
  ]
  
  // 按需加載支持
  // npm/yarn 安裝依賴 `babel-plugin-import` 詳細參見該插件使用
  // 配置以下
  plugins: [
      ['import', {
        'libraryName': 'anole-lego',
        // libraryDirectory: 'lib',
        camel2DashComponentName: false, // 是否須要駝峯轉短線
        camel2UnderlineComponentName: false, // 是否須要駝峯轉下劃線
        customName: (name) => {
          return `anole-lego/lib/components/${name}` // 核心配置 根據你本身的組件目錄配置
        },
        style: () => {
          return false
        }
      }],
      //...others
    ]
複製代碼

2. 使用

import { Button } from 'anole-lego';
ReactDOM.render(<Button>Start</Button>, mountNode);
複製代碼