V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
RickyC
V2EX  ›  Vue.js

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

  •  1
     
  •   RickyC · 2020-11-19 23:21:47 +08:00 · 4760 次点击
    这是一个创建于 1224 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比 vue2 大了几倍

    在不使用 CLI, 而是用<script src="vue.global.js">加载的情况下, 是不是会比 vue2 加载慢?

    34 条回复    2020-11-20 12:50:16 +08:00
    bojackhorseman
        1
    bojackhorseman  
       2020-11-19 23:24:50 +08:00 via iPhone
    不算大了吧,你随便加载几张图片就几 m 了
    murmur
        2
    murmur  
       2020-11-19 23:25:51 +08:00
    肯定不会是直接全部加载啊,template 编译器不要,打包成 release,再来个树抖,少不少

    就算直接引用咋了,gzip 后的大小在宽带下也可以接受,当年 12306 直接前端加载几十兆的列车时刻表都干得出来,只要你 cdn 够牛逼
    RickyC
        3
    RickyC  
    OP
       2020-11-19 23:29:59 +08:00
    @bojackhorseman 可是每个页面都要加载这个 500k 的东西
    murmur
        4
    murmur  
       2020-11-19 23:31:20 +08:00
    @RickyC 有缓存啊
    Jirajine
        5
    Jirajine  
       2020-11-19 23:33:18 +08:00 via Android
    还真有人用这种直接引用的方式用?我还以为这种用法只是 vue 用来彰显自己“易上手”呢。
    回到你的问题,有缓存的情况下,带宽不会造成太大影响。
    luob
        6
    luob  
       2020-11-19 23:35:04 +08:00
    RickyC
        7
    RickyC  
    OP
       2020-11-19 23:38:47 +08:00
    @luob 你的第 2 个文件是 520KB, 你下载下来看看
    RickyC
        8
    RickyC  
    OP
       2020-11-19 23:41:16 +08:00
    @Jirajine 不是服务器带宽呀; 浏览器运行一个 500 多 KB 的程序, 浏览器不会慢吗?
    randyo
        9
    randyo  
       2020-11-19 23:42:37 +08:00 via Android
    gzip 以后就很小了
    ljpCN
        10
    ljpCN  
       2020-11-19 23:43:50 +08:00 via Android
    @RickyC 代码规模跟运行效率没有直接的正相关关系。
    randyo
        11
    randyo  
       2020-11-19 23:44:34 +08:00 via Android
    @RickyC 加上 ui 库,打包单 js 文件 1M 一个微前端应用都有。。。
    qiaobeier
        12
    qiaobeier  
       2020-11-19 23:49:02 +08:00
    现代浏览器的渲染是渐进的,如果基础包稍大会拖累之后所有内容的渲染效果。
    不过没有对比数据的支撑,我这话其实没有多大的参考价值。
    JerryCha
        13
    JerryCha  
       2020-11-20 00:22:20 +08:00
    图片:老子比你大多了
    dahhd
        14
    dahhd  
       2020-11-20 00:30:49 +08:00 via iPhone
    包的大小,和空间复杂度有关系,和时间复杂度 有什么绝对的关系?
    by73
        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 大小的资源。。
    noe132
        16
    noe132  
       2020-11-20 00:42:26 +08:00   ❤️ 1
    Kasumi20
        17
    Kasumi20  
       2020-11-20 00:47:16 +08:00
    @dahhd 你家空间复杂度是看代码数量吖

    这个 500KB 是没有混淆的开发版, production 版本肯定要小很多...
    不要小瞧计算机, 几十 M 真的不是什么问题
    cmdOptionKana
        18
    cmdOptionKana  
       2020-11-20 00:50:52 +08:00
    @RickyC 这些框架的发展,与浏览器的改进、电脑硬件的进步是同时进行的,如果会拖慢浏览器,这些框架就发展不起来(或者会花更多精力去优化)。

    至于浏览器为什么不怕被这 500KB 拖慢,那就是硬件发展和浏览器底层优化的问题了。
    RickyC
        19
    RickyC  
    OP
       2020-11-20 00:52:49 +08:00
    @by73 谢谢, 终于找到这个 production 版了, 我以为还叫 .min.js
    autoxbc
        20
    autoxbc  
       2020-11-20 05:26:08 +08:00
    不要因为有些网站卡顿就怀疑现代浏览器的性能,是那些网站的代码有问题

    对于绝大多数网站,只要是认真写的代码,浏览器性能缩水 2 个数量级也不会卡
    SilentDepth
        21
    SilentDepth  
       2020-11-20 08:52:44 +08:00
    @RickyC #8 对于现代计算机 /浏览器的性能,500KB 真不是啥问题,上 MB 的都没见卡过
    liberty1900
        22
    liberty1900  
       2020-11-20 08:57:19 +08:00 via Android
    楼上用图片对比的过分了,js 加载是会阻断页面渲染的,图片不会,用户观感能一样吗
    gzip 和 CDN 都是蹩脚的理由,是只是优化,不能从源头解决问题
    直接用 script 便签引用毫无办法
    用 cli 会有 tree shaking,如果再做个代码分割体积会小很多
    用 nuxt 等框架做服务端渲染也是个办法
    myCupOfTea
        23
    myCupOfTea  
       2020-11-20 09:14:04 +08:00
    @liberty1900 js 也可以做到不阻断页面渲染啊
    gouflv
        24
    gouflv  
       2020-11-20 09:14:13 +08:00 via iPhone
    在 ie 年代的 jq,有多大你造吗
    yaphets666
        25
    yaphets666  
       2020-11-20 09:21:25 +08:00
    问题不大.vue3 引入了 tree shaking 技术. 没有用到的模块直接摇落.
    oneend
        26
    oneend  
       2020-11-20 09:41:37 +08:00
    5G:500kb 都要考虑? 当我是空气啊
    litujin1123
        27
    litujin1123  
       2020-11-20 09:43:12 +08:00
    @Jirajine 看一下 php 渲染的 html 页面,不用这样你怎么用?
    love
        28
    love  
       2020-11-20 09:58:24 +08:00
    你直接引用整个当然很大了,还是要事先 cli 编译才能小。

    另外 500K 也不算大,我的用 react 的小程序是 791K,只因用了个第三方 UI 框架。
    passerbytiny
        29
    passerbytiny  
       2020-11-20 09:59:02 +08:00 via Android
    请善用缓存机制,库文件只需要下载一次,不要每进一次页面就下载一次。当然,除了 html,浏览器不会全速加载其他东西,所以 js 还是要尽量压缩,不然 200k 的 js 就可能让人不进首页。
    keepeye
        30
    keepeye  
       2020-11-20 10:01:42 +08:00
    用了 element-ui iview 之类的岂不是更大?纠结这个干啥,该上 cdn 上 cdn 就是了
    Vegetable
        31
    Vegetable  
       2020-11-20 10:06:42 +08:00
    讨论质量每况愈下啊。
    文件大小上来说,你看这个文件 500k,但是网络传输是压缩过的,只有 111k,同时你没有选对文件,正确的 prod.js 网络传输只有 40k 。
    然后是你说的 500k 会不会对浏览器造成负担,这么说也没错,但是这个负担小到基本可以忽,我倒是希望微信开发团队有你这种极客精神。
    vision1900
        32
    vision1900  
       2020-11-20 10:18:06 +08:00
    现在的 Web 前端框架就是 bloated,这点没必要为其辩解,是实实在在的问题
    gzip,cdn,tree shaking,代码分割,服务端渲染都是常见的优化方式
    zjsxwc
        33
    zjsxwc  
       2020-11-20 10:30:22 +08:00
    老项目 vue1.x 传输 27k 实际解压后 75k,

    vue2 、3 也都在传输 100k 左右吧。
    JayLin1011
        34
    JayLin1011  
       2020-11-20 12:50:16 +08:00
    推荐使用 react 和 angular 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3381 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 13:16 · PVG 21:16 · LAX 06:16 · JFK 09:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.