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 的有一些配置项的变动、而饿了么团队却没有跟进合并。所以二者还是有一些差异的。