元素 UI 包括所有组件。制作大包大小答案

【问题标题】：Element UI including all components.Making large bundle size元素 UI 包括所有组件。制作大包大小
【发布时间】：2020-12-11 20:23:19
【问题描述】：

我指的是跟随。

https://element.eleme.io/#/en-US/component/quickstart#on-demand

所以我按照说明进行操作，但我使用的是基于类的组件。所以导入如下。

import {Checkbox} from 'element-ui';

@Component({
  components: { Checkbox
  }
})
export default class Work extends Vue {
}

但 bundle 似乎仍然包含整个元素 ui，而不仅仅是按钮组件。

当我运行 npm run build 时。它创建了 800+ kb 的供应商块。并且该块包含其他组件代码（即颜色选择器和所有其他）

他们提到要编辑 .babelrc: 如下：

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

但我没有在全局范围内使用组件作为插件。所以我没有做那个改变。

如何减少元素 ui 包并仅包含必需的组件，从而使供应商块更小？

【问题讨论】：

标签： typescript vue.js vue-component element-ui

【解决方案1】：

即使我们没有全局使用我们的组件作为插件，我们也需要 babel 设置。正如我错误地认为这些仅适用于全局插件的声明，因为示例使用Vue.use(Pagination);。

它与 babel.config.js 中的 babel 配置一起使用。

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

并安装以下软件包。 npm install babel-plugin-component -D

【讨论】：