我想在 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
block 文件,而是将完整的库插入到 main.js
文件中。
如何动态导入仅使用过的 ElementUI 元素(而不是整个库)?
最佳答案
Why does
import('element-ui').then(({Tree}) => Tree)
bundle the whole ElementUI library?
element-ui
library is a CommonJS module ,这不是 tree-shakeable( webpack-common-shake
存在,但你的里程可能会有所不同)。
Can I import only individual elements from ElementUI?
ElementUI docs推荐使用 babel-plugin-component
(也由 ElementUI 编写)仅导入使用的元素。用法记录如下:
安装
babel-plugin-component
:npm install babel-plugin-component -D
编辑
.babelrc
以包含:{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
静态导入所需的元素,并将其初始化为 Vue 组件:
import { Button } from 'element-ui'; Vue.component(Button.name, Button);
Can I dynamically import individual elements?
是的,这是可能的。
首先,了解 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__
) 格式化为 kebab-case (__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>
然而,这些元素相对较小,因此可能不值得延迟加载,考虑到容器 block 加上元素 block 的网络请求开销。另一方面,如果元素是有条件地呈现并且该条件很少为真,那么节省可能是值得的。
关于vue.js - 来自 ElementUI 的 VueJs + Webpack 延迟加载模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52104217/