组件库按需加载 借助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
    ]
复制代码
  1. 使用
import { Button } from 'anole-lego';
ReactDOM.render(<Button>Start</Button>, mountNode);
复制代码

转载于:https://juejin.im/post/5ced4caf6fb9a07ec07fa047

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值