让我们的Tinper-Bee组件也可以按需打包减少不必要的性能消耗

@kvkens 2019-01-11 07:32:08发表于 iuap-design/blog

UCF微服务标准前端工程里面已经内置了该插件,详见:https://github.com/iuap-design/ucf-webapp

安装插件

$ npm i babel-plugin-import-bee -D

配置使用

找到我们项目里面的.babelrc文件添加下面代码:

{
    "plugins": [["import-bee"] ]
}

如果你没有引用样式,想自动引用的话,可以配置如下:

{
    "plugins": [["import-bee",{ style : true }] ]
}

开启我们的style:true模式即可

编码区别

一般来说我们导入组件库,解构拿出我们的组件即可,如下:

import { Button } from 'tinper-bee';

正常使用Button即可,其他的组件类似,不要单独使用bee-xxx包哦,那样是不规范的

口说无凭,上图说话

没有使用大名鼎鼎的插件之前:😞

image

使用了大名鼎鼎的插件之后:😊

image

插件注意事项

  • 不支持CommonChunk,请使用webpack4的优化代码

感谢ant-design

技术参考:https://www.npmjs.com/package/babel-plugin-import

插件地址:https://www.npmjs.com/package/babel-plugin-import-bee