babel-plugin-import-bee

babel-plugin-import-bee

1. 能力及特性

当你的项目只用到了部分组件，你想要更小的打包体积的时候，我们提供了按需加载的能力。

import { Button } from 'tinper-bee';        // 这样会把整个组件库全部打包加载进来
// 转换为：
import Button from 'tinper-bee/lib/Button'; // 单独使用组件，按需使用

2. 安装与配置

通过npm下载安装插件

npm install babel-plugin-import-bee -D 

使用

1. 一般项目使用

编辑.babelrc文件,添加下面的配置：

{
  "plugins": [
    ["import-bee", {
      "libraryName": "tinper-bee",
      "libraryDirectory": "lib"
    }]
  ]
}

2. UCF-WEB 使用

编辑ucf.config添加如下配置：

babel_plugins: [
    [require.resolve("babel-plugin-import-bee"),
    {
        "libraryName": "tinper-bee",
        "libraryDirectory": "lib"
    }]
]

3. 注意事项说明

• 本插件不能与CommonChunk、cacheGroups一起使用，会造成体积更大，原因是优化提取代码后，会把组件库一起优化进去，导致两头都在优化代码会产生冲突重复。
• 多页面入口不适用，会导致vendor失效后，每一个entry会有一份node_modules的第三方代码+按需组件的代码，冗余过多，体积大。
• 适合普通SPA项目使用。

注意：插件目前是不支持vendor，CommonChunk插件和本插件不能同时使用，否则会出现vendor过大重复的问题，同时也不适合多页面程序，会导致构建体积过大重复的问题，切记。