今天发现这么一个现象,两份在我看来并无差别的代码,按需加载效果不一致。
一份能在打包时按需加载(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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…