基于elementUI的自研组件库如何按需加载elementUI组件？

Question

如题，我在这里举一个例子以便能描述的更清晰点：
我基于 elementUI 开发了一个UI组件库，比如说这个：

<my-city-select></my-city-select>

my-city-select.vue：

<template>
  <el-select>
    ...
  </el-select>
</template>

导出组件：

import MyCitySelect from './my-city-select';

const components = [
  MyCitySelect,
];

const install = (Vue) => {
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};
export {
  install,
  MyCitySelect,
};

export default {
  install,
};

最后的用法就跟 elementUI 一样：Vue.use(...)

然后我发现在打包的时候，就算只有这一个组件，最后打包好的文件有600多kb，gzip后也有100多kb。

这显然是把 elementUI 整个都打包进去了。

请问要怎么做才能减少包的大小呢？

Answer 1

elementUI组件按需引入试下呢