组件库按需加载-借助babelpluginimport实现

jiezi

5 年前

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

原理 [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 为例

配置 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
    ]

使用

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

组件库按需加载-借助babelpluginimport实现

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

今生