vue3 的安装包那么大, 500 多 K, 不会很慢吗?

cli

script

34 条回复 • 2020-11-20 12:50:16 +08:00

1

bojackhorseman

2020-11-19 23:24:50 +08:00 via iPhone

不算大了吧，你随便加载几张图片就几 m 了

2

murmur

2020-11-19 23:25:51 +08:00

肯定不会是直接全部加载啊，template 编译器不要，打包成 release，再来个树抖，少不少

就算直接引用咋了，gzip 后的大小在宽带下也可以接受，当年 12306 直接前端加载几十兆的列车时刻表都干得出来，只要你 cdn 够牛逼

3

RickyC

OP

2020-11-19 23:29:59 +08:00

@bojackhorseman 可是每个页面都要加载这个 500k 的东西

4

murmur

2020-11-19 23:31:20 +08:00

@RickyC 有缓存啊

5

Jirajine

2020-11-19 23:33:18 +08:00 via Android

还真有人用这种直接引用的方式用？我还以为这种用法只是 vue 用来彰显自己“易上手”呢。
回到你的问题，有缓存的情况下，带宽不会造成太大影响。

6

luob

2020-11-19 23:35:04 +08:00

看了一下，

https://unpkg.com/[email protected]/dist/vue.js 85.7kb
https://unpkg.com/[email protected]/dist/vue.global.js 111kb

你的 500k 是哪来的？

7

RickyC

OP

2020-11-19 23:38:47 +08:00

@luob 你的第 2 个文件是 520KB, 你下载下来看看

8

RickyC

OP

2020-11-19 23:41:16 +08:00

@Jirajine 不是服务器带宽呀; 浏览器运行一个 500 多 KB 的程序, 浏览器不会慢吗?

9

randyo

2020-11-19 23:42:37 +08:00 via Android

gzip 以后就很小了

10

ljpCN

2020-11-19 23:43:50 +08:00 via Android

@RickyC 代码规模跟运行效率没有直接的正相关关系。

11

randyo

2020-11-19 23:44:34 +08:00 via Android

@RickyC 加上 ui 库，打包单 js 文件 1M 一个微前端应用都有。。。

12

qiaobeier

2020-11-19 23:49:02 +08:00

现代浏览器的渲染是渐进的，如果基础包稍大会拖累之后所有内容的渲染效果。
不过没有对比数据的支撑，我这话其实没有多大的参考价值。

13

JerryCha

2020-11-20 00:22:20 +08:00

图片：老子比你大多了

14

dahhd

2020-11-20 00:30:49 +08:00 via iPhone

包的大小，和空间复杂度有关系，和时间复杂度有什么绝对的关系？

15

by73

2020-11-20 00:41:27 +08:00

1

不要光看大小啊，楼上的 unpkg 还启用了 br 压缩，完整代码传输只占了 110KB 左右。如果你觉得不满意还能用 production 版，https://unpkg.com/[email protected]/dist/vue.global.prod.js ，大小只有 100KB，br 压缩后传输只有 30KB，这不算大了。。

另外，核心框架其实一般都不算大，对比于业务 /样式这样的动辄数 MB 大小的资源。。

16

noe132

2020-11-20 00:42:26 +08:00

1

咦，这是什么 https://unpkg.com/[email protected]/dist/vue.global.prod.js

17

Kasumi20

2020-11-20 00:47:16 +08:00

@dahhd 你家空间复杂度是看代码数量吖

这个 500KB 是没有混淆的开发版, production 版本肯定要小很多...
不要小瞧计算机, 几十 M 真的不是什么问题

18

cmdOptionKana

2020-11-20 00:50:52 +08:00

@RickyC 这些框架的发展，与浏览器的改进、电脑硬件的进步是同时进行的，如果会拖慢浏览器，这些框架就发展不起来（或者会花更多精力去优化）。

至于浏览器为什么不怕被这 500KB 拖慢，那就是硬件发展和浏览器底层优化的问题了。

19

RickyC

OP

2020-11-20 00:52:49 +08:00

@by73 谢谢, 终于找到这个 production 版了, 我以为还叫 .min.js

20

autoxbc

2020-11-20 05:26:08 +08:00

不要因为有些网站卡顿就怀疑现代浏览器的性能，是那些网站的代码有问题

对于绝大多数网站，只要是认真写的代码，浏览器性能缩水 2 个数量级也不会卡

21

SilentDepth

2020-11-20 08:52:44 +08:00

@RickyC #8 对于现代计算机 /浏览器的性能，500KB 真不是啥问题，上 MB 的都没见卡过

22

liberty1900

2020-11-20 08:57:19 +08:00 via Android

楼上用图片对比的过分了，js 加载是会阻断页面渲染的，图片不会，用户观感能一样吗
gzip 和 CDN 都是蹩脚的理由，是只是优化，不能从源头解决问题
直接用 script 便签引用毫无办法
用 cli 会有 tree shaking，如果再做个代码分割体积会小很多
用 nuxt 等框架做服务端渲染也是个办法

23

myCupOfTea

2020-11-20 09:14:04 +08:00

@liberty1900 js 也可以做到不阻断页面渲染啊

24

gouflv

2020-11-20 09:14:13 +08:00 via iPhone

在 ie 年代的 jq，有多大你造吗

25

yaphets666

2020-11-20 09:21:25 +08:00

问题不大.vue3 引入了 tree shaking 技术. 没有用到的模块直接摇落.

26

oneend

2020-11-20 09:41:37 +08:00

5G：500kb 都要考虑？当我是空气啊

27

litujin1123

2020-11-20 09:43:12 +08:00

@Jirajine 看一下 php 渲染的 html 页面，不用这样你怎么用？

28

love

2020-11-20 09:58:24 +08:00

你直接引用整个当然很大了，还是要事先 cli 编译才能小。

另外 500K 也不算大，我的用 react 的小程序是 791K，只因用了个第三方 UI 框架。

29

passerbytiny

2020-11-20 09:59:02 +08:00 via Android

请善用缓存机制，库文件只需要下载一次，不要每进一次页面就下载一次。当然，除了 html，浏览器不会全速加载其他东西，所以 js 还是要尽量压缩，不然 200k 的 js 就可能让人不进首页。

30

keepeye

2020-11-20 10:01:42 +08:00

用了 element-ui iview 之类的岂不是更大？纠结这个干啥，该上 cdn 上 cdn 就是了

31

Vegetable

2020-11-20 10:06:42 +08:00

讨论质量每况愈下啊。
文件大小上来说，你看这个文件 500k，但是网络传输是压缩过的，只有 111k，同时你没有选对文件，正确的 prod.js 网络传输只有 40k 。
然后是你说的 500k 会不会对浏览器造成负担，这么说也没错，但是这个负担小到基本可以忽，我倒是希望微信开发团队有你这种极客精神。

32

vision1900

2020-11-20 10:18:06 +08:00

现在的 Web 前端框架就是 bloated，这点没必要为其辩解，是实实在在的问题
gzip，cdn，tree shaking，代码分割，服务端渲染都是常见的优化方式

33

zjsxwc

2020-11-20 10:30:22 +08:00

老项目 vue1.x 传输 27k 实际解压后 75k，

vue2 、3 也都在传输 100k 左右吧。

34

JayLin1011

2020-11-20 12:50:16 +08:00

推荐使用 react 和 angular 。