element-ui按需加载问题.

发布于 2022-09-12 13:32:23 字数 1556 浏览 15 评论 0

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

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

薆情海 2022-09-19 13:32:23

image.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文