如何解决元素用户界面,包括所有组件捆绑尺寸较大
我指的是以下内容。
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。