对于大中型前端项目为了解耦与复用，更多的公司会选择自己封装组件库，那么一次引入整个组件库必然导致项目过大，如何按需加载则必须要做

前世 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    ]
  1. 使用
import { Button } from 'anole-lego';ReactDOM.render(<Button>Start</Button>, mountNode);