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

回答

element-ui按需加载问题.

以上是 element-ui按需加载问题. 的全部内容， 来源链接： utcz.com/a/69619.html

回到顶部