babel-import-plugin：

目录

介绍：

babel-plugin-import按需引入Echarts：

babel-plugin-component 和 babel-plugin-import的区别：

---

介绍：

        按需加载是以组件为基本单位产出 js、css、less 文件，借助插件或者部分引入的写法，使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。

        若是采用手动引入需要使用到的组件以及其对应的样式文件，那么在 webpack 构件时组件库中其他未被引入的文件不会被打包。

import Button from 'lib/button';
import 'lib/lib/button/style';

        若是自动按需引入：

npm i babel-plugin-import -D
 
module.exports = {
  plugins: [
    ['import', {
      libraryName,
      libraryDirectory: 'es',
      style: true
    }, libraryName]
  ]
};
 
 
import { Button } from libraryName;

        组件其实就是对一堆 js、css 以及 less 等文件的总称，自动引入的本质是将引入组件的写法通过插件来转换成手动引入组件对应的代码以及样式文件的写法。核心原理依然是对源码的 import 导入写法进行转换——词法语法分析，AST转换，代码生成。

        该插件主要参数：

 "libraryName": "", // 组件库名称，对应 import 语法中的包名
  "libraryDirectory": "lib", // 编译之后各个组件单元所在文件夹名称
  "style": true, // 是否引入组件对应样式文件，也可以传入 less 来引入 less 文件
  "styleLibraryDirectory": "", // 编译之后引入的组件样式文件所在文件夹名称
  "camel2DashComponentName": false, // 是否将驼峰命名的导入变量转换为对应的横线连接命名的文件名
  "customName": (name, file) => { return `/lib/${name}` }, // 自定义编译之后引入的组件名
  "customStyleName": (name, file) => { return `/lib/css/${name}` }, // 自定义编译之后引入样式文件的名称

        插件的钩子函数和整体逻辑详见：babel-plugin-import 的组件按需加载原理_薛定谔的猫96的博客-CSDN博客

babel-plugin-import按需引入Echarts：

👉前端性能优化-按需引入Echarts组件_echarts 按需引入未生效_Rainy_X的博客-CSDN博客

babel-plugin-component 和 babel-plugin-import的区别：

        1、babel-plugin-import 是 ant-design 团队出的，可以说其他绝大部分按需引入的插件都是在此基础上魔改的。
        2、babel-plugin-component 是饿了么团队在前者的基础上做了一些改动。主要是因为 fork 的时间太早（2016 年 4 月），饿了么修复了一些早期 bug 却并没有 PR 到 ant-design 的仓库里去，但后来 ant-design 也有修复；再就是后来 ant-design 的有一些配置项的变动、而饿了么团队却没有跟进合并。所以二者还是有一些差异的。