来自 ElementUI 的 VueJs + Webpack 延迟加载模块

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存在，但您的里程可能会有所不同(。

我可以只从元素UI导入单个元素吗？

ElementUI文档建议使用babel-plugin-component(也由 ElementUI 编写(仅导入使用的元素。用法记录如下：

1. 安装babel-plugin-component：

   npm install babel-plugin-component -D
   

2. 编辑.babelrc以包括：

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

3. 静态导入所需的元素，并将其初始化为 Vue 组件：

   import { Button } from 'element-ui';
   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 预设选项中配置。
• 转换包括将组件的名称(__ComponentName__(格式化为烤肉串大小写(__component-name__(。例如，Button变为button;DatePicker变得date-picker.

• 确保删除现有的 ElementUI 导入，这将击败"按需"导入：

  // import ElementUI from 'element-ui'; // REMOVE
  // import 'element-ui/lib/theme-chalk/index.css'; // REMOVE
  

因此，我们可以使用这些知识来动态导入特定元素，如下所示：

// 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>

但是，这些元素相对较小，因此考虑到容器块和元素块的网络请求的开销，可能不值得延迟加载。另一方面，如果这些要素是有条件的，而这种条件很少为真，那么节省下来可能是值得的。