V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
0xffSol
V2EX  ›  程序员

vite 编译速度没有宣传的那么快啊!

  •  1
     
  •   0xffSol · 2022-08-18 09:32:07 +08:00 · 4652 次点击
    这是一个创建于 588 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司项目使用 vue3 来开发的,但是使用 vite 打包需要 15 分钟。运行 dev 环境也需要 3 分钟,搞不懂是什么问题!

    本人 mac pro 打包需要 5 分钟左右,前端同事打包都需要 15 分钟

    有大佬帮忙分析一下,如何优化项目打包速度,测试每次发布前端都要等 15 分钟

    • 项目大小 600M ,我以前 vue2 项目 900 多 M 也没有这么慢
    • vite.config.js 里面也没有什么配置项目
    • package.json 依赖项也不是太多
    {
      "dependencies": {
        "@antv/g6": "^4.6.4",
        "@element-plus/icons-vue": "0.2.6",
        "@fortawesome/fontawesome-free": "^6.1.1",
        "@vueuse/core": "^7.5.5",
        "axios": "0.24.0",
        "codemirror": "^5.65.3",
        "diff-match-patch": "^1.0.5",
        "echarts": "5.2.2",
        "element-plus": "2.0.1",
        "file-saver": "2.0.5",
        "fuse.js": "6.4.6",
        "js-cookie": "3.0.1",
        "jsencrypt": "3.2.1",
        "lodash": "^4.17.21",
        "mitt": "^3.0.0",
        "nprogress": "0.2.0",
        "uuid": "^8.3.2",
        "vue": "3.2.26",
        "vue-cropper": "1.0.2",
        "vue-router": "4.0.12",
        "vuex": "4.0.2"
      },
      "devDependencies": {
        "@types/lodash": "^4.14.181",
        "@vitejs/plugin-vue": "1.9.4",
        "@vue/compiler-sfc": "3.2.22",
        "sass": "1.45.0",
        "unplugin-auto-import": "0.5.3",
        "unplugin-element-plus": "^0.3.4",
        "vite": "2.6.14",
        "vite-plugin-compression": "0.3.6",
        "vite-plugin-svg-icons": "1.0.5",
        "vite-plugin-vue-setup-extend": "0.1.0"
      }
    }
    
    34 条回复    2022-08-19 11:10:15 +08:00
    GreatAuk
        1
    GreatAuk  
       2022-08-18 09:39:41 +08:00
    vite 打包是用的 rollup, 速度相对 webpack 没有太大优势。好奇什么前端项目有 600M 大小,你怕不是把 node_modules 算进去了吧。
    angrylid
        2
    angrylid  
       2022-08-18 09:46:13 +08:00 via Android
    @GreatAuk 有没有一种可能,这个项目包括静态图片资源已经达到了 600MB
    fox2081
        3
    fox2081  
       2022-08-18 09:54:12 +08:00
    Vite 快是启动快,因为实时编译,build 都差不多,不过你这个几分钟肯定是有问题的,啥项目能 600 兆啊,算上 node_modules 了?
    NerbraskaGuy
        4
    NerbraskaGuy  
       2022-08-18 10:13:05 +08:00
    antv 这玩意儿很占包体积,之前公司项目有使用这个打包也是巨慢,但是 600M 也有点太夸张了
    lisongeee
        5
    lisongeee  
       2022-08-18 10:17:57 +08:00
    <运行 dev 环境也需要 3 分钟,搞不懂是什么问题!>
    可能是你自定义了 UI 库的主题而且用是 sass 一类的变量,导致每次启动都要编译 ui 库的样式
    如果你的样式是固定的,你可以设置缓存这个样式文件
    jasonkayzk
        6
    jasonkayzk  
       2022-08-18 10:20:04 +08:00
    600M 是打包了个 os 内核?
    gouflv
        7
    gouflv  
       2022-08-18 10:20:31 +08:00 via iPhone
    vite 不是万能的,这种场景应该拆分
    duan602728596
        8
    duan602728596  
       2022-08-18 10:47:21 +08:00
    lodash 和 echarts 按需加载了吗?
    建议使用 lodash-es 替换 lodash 。
    element-plus 应该也是可以按需加载的啊
    图片压缩了吗?
    liubaicai
        9
    liubaicai  
       2022-08-18 10:58:29 +08:00
    比你的依赖还多,刚试了下,winPC ,算上 ts 的 check 打包 2 分 50 秒,run dev 几秒钟
    liubaicai
        10
    liubaicai  
       2022-08-18 11:01:48 +08:00
    不知道你大小怎么算的,我的算 node_modules 和.git 目录 591M ,不算 41m ,打包完 12m
    CHTuring
        11
    CHTuring  
       2022-08-18 11:07:09 +08:00
    楼上的先等一等,不是我不信,我就想看看 600m 的项目打包是什么样子...
    um1ng
        12
    um1ng  
       2022-08-18 11:08:28 +08:00
    600M...你难道不该先考虑优化一下项目吗
    DCELL
        13
    DCELL  
       2022-08-18 11:16:59 +08:00
    什么前端项目 600M ,我很想知道,真的,算 node_modules 么
    Hipan
        14
    Hipan  
       2022-08-18 12:02:48 +08:00
    想看看什么前端大项目那么大
    Charrlles
        15
    Charrlles  
       2022-08-18 12:42:12 +08:00 via iPhone
    对于大项目的打包,webpack5 完胜 vite ,在持久缓存的加持下,打包基本不会超过 1 分钟
    dengshen
        16
    dengshen  
       2022-08-18 13:03:55 +08:00 via iPhone
    打包完还有 600m ?问一下你们的服务器宽带是多大?用户能用嘛?
    hzxxx
        17
    hzxxx  
       2022-08-18 13:46:24 +08:00
    @dengshen 会不会是个桌面客户端呢
    musi
        18
    musi  
       2022-08-18 14:25:34 +08:00
    600M 是纯代码还是算了依赖
    zzlatan
        19
    zzlatan  
       2022-08-18 14:54:32 +08:00
    600M 项目包含.git 文件吧 ? 迭代的太多了,这个文件有时候也可能挺大。
    karott7
        20
    karott7  
       2022-08-18 16:58:06 +08:00
    没见过哪个前端项目有 600M 的,加图片资源也不可能
    xff1874
        21
    xff1874  
       2022-08-18 17:21:41 +08:00
    vite 是开发的时候快一点,打包还是一样的
    0xffSol
        22
    0xffSol  
    OP
       2022-08-18 17:24:27 +08:00
    包含 node_modules,项目有 600m
    0xffSol
        23
    0xffSol  
    OP
       2022-08-18 17:24:58 +08:00
    @musi 算 node_modules
    0xffSol
        24
    0xffSol  
    OP
       2022-08-18 17:29:53 +08:00
    @xff1874 我以前项目 900 多 M ,用 webpack 打包,也没有那么慢啊
    0xffSol
        25
    0xffSol  
    OP
       2022-08-18 17:33:25 +08:00
    @liubaicai 这个打包时间跟我差不多,但是有点比 webpack 慢太多了
    xff1874
        26
    xff1874  
       2022-08-18 17:40:09 +08:00
    @0xffSol vite 上线的打包是 rollup ,估计速度上比 webpack 还是差一点。
    0xffSol
        27
    0xffSol  
    OP
       2022-08-18 17:49:25 +08:00
    Entrypoints:
    app (1.97 MiB)
    scripts/runtime.060cf93a.js
    styles/11.5027944b.css
    scripts/app.060cf93a.js

    Hash: 060cf93a16f5e45a798c
    Version: webpack 4.46.0
    Time: 65606ms

    weback 包含 node_modules 项目 900m 时间:1 分钟
    0xffSol
        28
    0xffSol  
    OP
       2022-08-18 17:50:37 +08:00
    @xff1874 主要觉得差太多了,十几分钟打包,webpack2 分钟打包。现在自动化发布,服务器打包每次前端都要 15 分钟,让我优化。我都要炸了
    Sendya
        29
    Sendya  
       2022-08-18 18:48:26 +08:00 via Android
    你服务器打包,是算上了 npm i ?
    @0xffSol
    0xffSol
        30
    0xffSol  
    OP
       2022-08-18 18:50:55 +08:00 via iPhone
    @Sendya 没有,同事本地打包也是那么久
    0xffSol
        31
    0xffSol  
    OP
       2022-08-18 18:51:19 +08:00 via iPhone
    @Sendya 我 mac pro 打包需要 5 分钟
    murongxdb
        32
    murongxdb  
       2022-08-19 08:43:38 +08:00
    用 vite 启动,webpack 打包呗
    0xffSol
        33
    0xffSol  
    OP
       2022-08-19 10:50:01 +08:00 via iPhone
    @murongxdb 用的官方脚手架,你有 webpack 配置吗?这样会不会导致开发环境与生产环境不一致,导致 bug 不一样呢
    murongxdb
        34
    murongxdb  
       2022-08-19 11:10:15 +08:00
    @0xffSol 打包时候用 vue-cli 就行了 启动的时候用 vite
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3229 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:19 · PVG 22:19 · LAX 07:19 · JFK 10:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.