简介

babel-plugin-import 的核心用途是 实现组件和样式的按需加载，从而显著减少打包体积。

主要作用

下面通过 Element UI 的具体示例说明其作用：

一般情况下，我们可能会用到很多的 Element UI 组件，为了方便，我们会这样引入 Element UI 全量的组件和 css 文件

import Vue from "vue";
import ElementUI from "element-ui"; // 引入整个ElementUI
import "element-ui/lib/theme-chalk/index.css"; // 全量样式

Vue.use(ElementUI); // 全局注册所有组件

这样存在一个问题，即使只用了几个组件，也会打包整个 Element UI 的代码和样式（约 200KB+）。

然后我们可能考虑使用 按需引入 的方式，只引入我们需要的组件，这样可以显著减少打包体积。

// 配置后只需这样写（原始代码）
import { Button, Select } from "element-ui";

Vue.use(Button);
Vue.use(Select);

但是实际上呢，这个按需引入可能并不彻底，甚至可能只是看起来是按需引入。说白了，能否真正的做到按需引入，其实和 Tree Shaking 直接相关。组件库内部的 JS、CSS 文件可能依旧是全量引入的，可能对 Tree Shaking 技术的支持不彻底。

转换前，我们有如下代码：

// 配置后只需这样写（原始代码）
import { Button, Select } from "element-ui";

我们使用 babel-plugin-import 插件后，Babel 会将前边的代码转换为类似下面的形式：

import Button from "element-ui/lib/button"; // 仅加载Button组件
import "element-ui/lib/button/style.css"; // 自动引入Button样式

import Select from "element-ui/lib/select"; // 仅加载Select组件
import "element-ui/lib/select/style.css"; // 自动引入Select样式

效果：打包时只包含 Button 和 Select 的代码和样式，体积减少 80% 以上。

具体配置步骤

1、安装插件

npm install babel-plugin-import --save-dev

2、Babel 配置（.babelrc 或 babel.config.js）

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "element-ui",
        "style": true // true 表示引入CSS，也可设为 "css" 或自定义路径
      }
    ]
  ]
}

3、Webpack 需配合处理 CSS

确保已安装 style-loader 和 css-loader：

// webpack.config.js
module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    },
  ];
}

关键配置选项

以下是针对 Element UI 框架的一些配置说明：

参数	作用	推荐值
libraryName	指定库名称（固定为 element-ui）	"element-ui"
style	是否自动引入样式	true（或 "css"）
customStyleName	自定义样式文件路径	(name) => custom/path/${name}.css`

注意事项

1. 样式文件格式：
   • Element UI 使用预编译的 CSS，配置 style: "css" 或 style: true 均可。
2. 组件注册方式：
   • 按需引入时需手动注册组件（Vue.use(Button)），不能全局注册。
3. 主题定制：
   • 如需定制主题，仍需单独引入主题文件，但可通过 customStyleName 指向自定义路径。

完整示例代码

1. 组件按需引入

import Vue from "vue";
import { Button, Select } from "element-ui";

Vue.use(Button);
Vue.use(Select);

2. Babel 配置

// babel.config.js
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "element-ui",
        style: true, // 自动引入CSS
      },
    ],
  ],
};

3. Webpack 配置

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

---

通过 babel-plugin-import，Element UI 项目的打包体积可优化至 仅包含实际使用的组件，非常适合生产环境使用！ 🚀

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24