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

问题描述

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

我尝试过:

 从/* webpackChunkName导入{Tree}:"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 库是CommonJS模块，该模块不可摇树( webpack-常见震动 存在，但您的里程可能会有所不同.)

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

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

1. 安装 babel-plugin-component :

     npm install babel-plugin-component -D 

2. 编辑 .babelrc 以包括:

    <代码> {"presets":[[" es2015，{" modules:false}]]，插件":[[成分"，{"libraryName":"element-ui"，"styleLibraryName":主题粉笔"}]]} 

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

    从'element-ui'导入{Button};Vue.component(Button.name，Button); 

我可以动态导入单个元素吗?

是的，有可能.

首先，了解 babel-plugin-component 的工作方式很有用.该插件可以有效地进行以下转换:

 从'element-ui'导入{__ComponentName__};Vue.component('x-foo'，__ComponentName__); 

进入:

 从'element-ui/lib/__ component-name__'导入__ComponentName__;导入'element-ui/lib/__ styleLibraryName __/__ component-name __.css';Vue.component('x-foo'，__ComponentName__); 

注释:

在 .babelrc 中的Babel预设选项中配置了
• __ styleLibraryName __ .
• 转换包括在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__')); 

或者:

 <！-MyComponent.vue->< script>导入'element-ui/lib/__ styleLibraryName __/__ component-name __.css';导出默认值{组件: {'x-foo':()=>import(/* webpackChunkName:"x-foo" */'element-ui/lib/__ component-name__')，}}</script> 

例如，要导入带有Chalk主题的 Button :

 <！-MyComponent.vue->< script>导入'element-ui/lib/theme-chalk/button.css';导出默认值{组件: {'el-button':()=>import(/* webpackChunkName:"element-button" */'element-ui/lib/button')，}}</script> 

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

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屋！