element-ui 按需引入包体是全部引入的3+倍

element-ui 支持组件的按需引入，同时也支持全部引入。全部引入的方式：

import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

这种写法很简单，不过为了降低 element-ui 的包体大小，通常都会使用按需引入的方式。

按需引入需要安装 babel 插件：

npm install babel-plugin-component -D

安装完后，需要在 webpack 的配置文件使用该插件：

module: {
  rules: [
    {
      //  正则表达式匹配js文件
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            "presets": [
              "@babel/preset-env"
            ],
            "plugins": [
              [
                "component",
                {
                  "libraryName": "element-ui",
                  "styleLibraryName": "theme-chalk"
                }
              ]
            ]
          }
        },
      ],
    }
  ]
}
‍

上面的核心配置其实是这段：

"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
]
]

libraryName：项目名（npm包名），如果你基于 element-ui 创建了私有库，需要加上 scope，比如："libraryName": "@sy/element-ui"

styleLibraryName，样式库的名称，如果你基于 element-ui 创建了私有库，需要加上 scope，比如："styleLibraryName": "@sy/theme-chalk"。

除了在 webpack 配置文件中配置 babel，也可以创建一个 babel 的配置文件 .babelrc，babel-loader 会使用 babel 的配置文件，其实是把 babel-loader 中的 options 放到了配置文件中：

那么 babel-plugin-component 的原理是什么呢？其实就是把导入的语句通过 babel plugin 进行了替换：

但是，单组件引入，真的能降低包的大小吗？其实是有条件的，下图是通过部分导入的方式导入全部组件，我测试了下，按需大约导入 19 个组件包体大小就会大于全部导入：

如果，通过全局引入，包体的大小反而更小：

所以，在引入少量组件时可以通过部分引入的方式，若引入组件太多，可采用全部引入的方式，包体反而会更小。

大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/