来自 ElementUI 的 VueJs + Webpack 延迟加载模块 [英] VueJs + Webpack lazyload modules from ElementUI

问题描述

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

我试过了:

import { Tree } from/* webpackChunkName : "element-ui" */'element-ui';Vue.component(Tree.name, Tree);Vue.use(Tree);

还有这个:

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

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

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

解决方案

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

element-ui library 是一个 CommonJS 模块，它不是 tree-shakeable (webpack-common-shake 存在，但您的里程可能会有所不同).

<块引用>

我可以只从 ElementUI 导入单个元素吗?

ElementUI docs 推荐使用 babel-plugin-component(也由 ElementUI 编写)只导入使用的元素.用法记录如下:

1. 安装babel-plugin-component:

   npm install babel-plugin-component -D

2. 编辑 .babelrc 以包含:

   {预设":[[es2015"，{模块":假}]]，插件":[[零件"，{"libraryName": "element-ui","styleLibraryName": "主题粉笔"}]]}

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__';导入 'element-ui/lib/__styleLibraryName__/__component-name__.css';Vue.component('x-foo', __ComponentName__);

注意事项:

• __styleLibraryName__ 在 .babelrc 中的 Babel 预设选项中配置.
• 转换包括在 kebab-case (__component-name__) 中格式化组件的名称 (__ComponentName__).例如，Button 变成 button；而 DatePicker 变成了 date-picker.

• 确保删除现有的 ElementUI 导入，这会破坏按需"导入:

  //从 'element-ui' 导入 ElementUI;//消除//导入 'element-ui/lib/theme-chalk/index.css';//消除

因此，我们可以使用该知识动态导入特定元素，如下所示:

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

或者:

<脚本>导入 'element-ui/lib/__styleLibraryName__/__component-name__.css';导出默认{组件: {'x-foo': () =>import(/* webpackChunkName: "x-foo" */'element-ui/lib/__component-name__'),}}

例如，使用 Chalk 主题导入 Button:

<脚本>导入 'element-ui/lib/theme-chalk/button.css';导出默认{组件: {'el-button': () =>import(/* webpackChunkName: "element-button" */'element-ui/lib/button'),}}

然而，考虑到容器块加上元素块的网络请求开销，这些元素相对较小，因此可能不值得延迟加载.另一方面，如果元素有条件地呈现并且该条件很少为真，那么节省的成本可能是值得的.

I would like to lazy-load a specific element of ElementUI in a Vue component.

I tried this:

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

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

And this:

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

But in both cases, the element-ui.js chunk file is not created, and the full library is inserted into the main.js file instead.

How do I dynamically import only the used elements of ElementUI (not the entire library)?

解决方案

Why does import('element-ui').then(({Tree}) => Tree) bundle the whole ElementUI library?

The element-ui library is a CommonJS module, which is not tree-shakeable (webpack-common-shake exists, but your mileage may vary).

Can I import only individual elements from ElementUI?

The ElementUI docs recommend using babel-plugin-component (also written by ElementUI) to import only the elements used. The usage is documented as follows:

1. Install babel-plugin-component:

   npm install babel-plugin-component -D
   

2. Edit .babelrc to include:

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

3. Statically import the desired element, and initialize it as a Vue component:

   import { Button } from 'element-ui';
   Vue.component(Button.name, Button);
   

Can I dynamically import individual elements?

Yes, it's possible.

First, it's useful to understand how babel-plugin-component works. The plugin effectively converts this:

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

into:

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

Notes:

• __styleLibraryName__ is configured in the Babel preset options within .babelrc.
• The conversion includes formatting the component's name (__ComponentName__) in kebab-case (__component-name__). For example, Button becomes button; and DatePicker becomes date-picker.

• Make sure to remove existing ElementUI imports, which would defeat the "on demand" imports:

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

So, we can use that knowledge to dynamically import a specific element like this:

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

Or:

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

For example, to import Button with the Chalk theme:

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

However, these elements are relatively small and thus probably not worth lazy-loading, considering the overhead of the network requests for the container chunk plus the element chunk. On the other hand, the savings might be worthwhile if the elements were conditionally rendered and that condition were rarely true.

这篇关于来自 ElementUI 的 VueJs + Webpack 延迟加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！