Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

今天发现这么一个现象,两份在我看来并无差别的代码,按需加载效果不一致。
一份能在打包时按需加载(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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
3.3k views
Welcome To Ask or Share your Answers For Others

1 Answer

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...