元素 UI 包括所有 components.Making 大包大小

Question

我指的是以下内容。

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

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

import {Checkbox} from 'element-ui';

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

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

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

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

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

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

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

Answer 1

即使我们不在全局范围内使用我们的组件作为插件，我们也需要 babel 设置。因为我误会了他们的说法，即这些仅适用于全局插件，因为示例使用 Vue.use(Pagination);.

它与 babel 配置一起工作，如下 babel.config.js。

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

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

元素 UI 包括所有 components.Making 大包大小

Element UI including all components.Making large bundle size

typescript

vue.js

vue-component

element-ui