Vue 按需引入 ElementUI：节省包体积，提升性能

ElementUI 是一个基于 Vue.js 的 UI 框架，提供了丰富的组件库，方便开发者快速构建页面。然而，如果直接引入整个 ElementUI 库，会导致项目包体积过大，影响页面加载速度。为了解决这个问题，我们可以使用 babel-plugin-component 插件按需引入 ElementUI 组件。

1. 安装 babel-plugin-component

npm install babel-plugin-component -D

2. 修改 .babelrc 文件

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
    ,
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3. 按需引入

// main.js
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

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

new Vue({
  el: '#app',
  render: h => h(App)
});

在以上代码中，我们只引入了 Button 和 Select 组件，而没有引入整个 element-ui 库。这样，就可以有效地减小项目包体积，提高页面加载速度。

注意：

需要根据实际情况修改 libraryName 和 styleLibraryName 的值。
按需引入的组件必须在 main.js 文件中使用 Vue.use() 方法注册。
除了 element-ui 库，还可以使用 component 插件按需引入其他第三方库。