element-ui按需加载问题.
今天发现这么一个现象,两份在我看来并无差别的代码,按需加载效果不一致。
一份能在打包时按需加载(chunk-vendors.hash.js小)。
另一份看大小像是全局引入(无论我引入多少个组件打包后的大小不会有变化)。
初始化时会在main.js
中引入plugins/index.js
关键代码如下:
1. 无法按需加载的代码
// plugins/element.js
import "element-ui/lib/theme-chalk/index.css"
export {
Button,
Form,
FormItem,
Input,
Card,
Row,
Col,
Table,
TableColumn,
Pagination
} from "element-ui";
// plugins/index.js
import Vue from "vue";
import * as ElementComponents from "./element";
// 这里ElementComponents确实是只有我需要的组件
Object.keys(ElementComponents).forEach(name => {
Vue.use(ElementComponents[name]);
});
2. 能正常按需加载的代码
// plugins/element.js
import "element-ui/lib/theme-chalk/index.css"
import Vue from "vue";
import {
Button,
Form,
FormItem,
Input,
Card,
Row,
Col,
Table,
TableColumn,
Pagination
} from "element-ui";
[
Button,
Form,
FormItem,
Input,
Card,
Row,
Col,
Table,
TableColumn,
Pagination
].forEach(item => Vue.use(item));
// plugins/index.js
import Vue from "vue";
import "./element.js";
有没有老哥知道差别在哪?
======================================================
我使用vant试了一下相同写法, 是能正常按需加载的 使用的是babel-plugin-import
element-ui使用的是babel-plugin-component其forked自babel-plugin-import
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)