VueJs + Webpack从ElementUI装载模块

Question

我想在Vue组件中延迟加载ElementUI的特定元素。

我试过这个：

import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui';

Vue.component(Tree.name, Tree);
Vue.use(Tree);

这是：

{
  components: {
    'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree)
  }
}

但是在这两种情况下，都没有创建element-ui.js块文件，而是将完整的库插入到main.js文件中。

如何只动态导入ElementUI使用的元素(而不是整个库)？

Answer 1

为什么import('element-ui').then(({Tree}) => Tree)要捆绑整个ElementUI库？

element-ui 库是一个CommonJS模块，它不是树抖动的(webpack-common-shake存在，但您的里程可能有所不同)。

我只能从ElementUI中导入单独的元素吗？

ElementUI 文档建议使用babel-plugin-component (也是由ElementUI编写的)只导入所使用的元素。使用情况记录如下：

1. 安装babel-plugin-component： npm安装babel插件组件-D
2. 编辑.babelrc以包括： {“预设”：["es2015"，{“模块”：false }]，“插件”：[“组件”，{ "libraryName"：“元素-ui”，"styleLibraryName"：“主题-粉笔”}]}
3. 静态导入所需的元素，并将其初始化为Vue组件： 从‘element-ui’导入{ Button }；Vue.component(Button.name，Button)；

我可以动态地导入各个元素吗？

是的，有可能。

首先，了解babel-plugin-component是如何工作的是很有用的。插件有效地转换了这一点：

import { __ComponentName__ } from 'element-ui';
Vue.component('x-foo', __ComponentName__);

转入：

import __ComponentName__ from 'element-ui/lib/__component-name__';
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
Vue.component('x-foo', __ComponentName__);

备注：

• __styleLibraryName__是在.babelrc中的Babel预设选项中配置的。
• 转换包括在kebab-case (__component-name__)中格式化组件的名称(__component-name__)。例如，Button变成了button，DatePicker变成了date-picker。
• 确保删除现有的ElementUI导入，这将击败“按需”导入： //从'element-ui'；// REMOVE // import‘元素-ui/lib/ ElementUI’导入粉笔/index.css‘；//删除

因此，我们可以使用这些知识动态导入这样的特定元素：

// main.js
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
Vue.component('x-foo', () => import(/* webpackChunkName: "x-foo" */ 'element-ui/lib/__component-name__'));

或者：

<!-- MyComponent.vue -->
<script>
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';

export default {
  components: {
    'x-foo': () => import(/* webpackChunkName: "x-foo" */ 'element-ui/lib/__component-name__'),
  }
}
</script>

例如，要导入具有Chalk主题的Button：

<!-- MyComponent.vue -->
<script>
import 'element-ui/lib/theme-chalk/button.css';

export default {
  components: {
    'el-button': () => import(/* webpackChunkName: "element-button" */ 'element-ui/lib/button'),
  }
}
</script>

但是，考虑到网络请求容器块加上元素块的开销，这些元素相对较小，因此可能不值得延迟加载。另一方面，如果要素是有条件地呈现的，而这一条件很少是正确的，则节省的费用可能是值得的。