元素用户界面，包括所有组件捆绑尺寸较大

编程问答 2022-08-15

问题描述

我指的是以下内容。

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

所以我遵循了说明，但是我正在使用基于类的组件。因此，导入如下。

import {CheckBox} from 'element-ui';

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

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

当我运行npm运行build时。它会创建800 kb以上的供应商数据块。并且该块包含其他组件代码（即拾色器和所有其他代码）

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

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

但是我没有将组件全局用作插件。所以我没有做那改变。

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

解决方法

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

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

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

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

typescripttypescripttypescriptvue-componentvue.js