V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
0xffSol
V2EX  ›  程序员

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

  •  1
     
  •   0xffSol · Aug 18, 2022 · 6111 views
    This topic created in 1350 days ago, the information mentioned may be changed or developed.

    公司项目使用 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 replies    2022-08-19 11:10:15 +08:00
    GreatAuk
        1
    GreatAuk  
       Aug 18, 2022
    vite 打包是用的 rollup, 速度相对 webpack 没有太大优势。好奇什么前端项目有 600M 大小,你怕不是把 node_modules 算进去了吧。
    wakarimasen
        2
    wakarimasen  
       Aug 18, 2022 via Android
    @GreatAuk 有没有一种可能,这个项目包括静态图片资源已经达到了 600MB
    momo2278
        3
    momo2278  
       Aug 18, 2022
    Vite 快是启动快,因为实时编译,build 都差不多,不过你这个几分钟肯定是有问题的,啥项目能 600 兆啊,算上 node_modules 了?
    NerbraskaGuy
        4
    NerbraskaGuy  
       Aug 18, 2022
    antv 这玩意儿很占包体积,之前公司项目有使用这个打包也是巨慢,但是 600M 也有点太夸张了
    lisongeee
        5
    lisongeee  
       Aug 18, 2022
    <运行 dev 环境也需要 3 分钟,搞不懂是什么问题!>
    可能是你自定义了 UI 库的主题而且用是 sass 一类的变量,导致每次启动都要编译 ui 库的样式
    如果你的样式是固定的,你可以设置缓存这个样式文件
    jasonkayzk
        6
    jasonkayzk  
       Aug 18, 2022
    600M 是打包了个 os 内核?
    gouflv
        7
    gouflv  
       Aug 18, 2022 via iPhone
    vite 不是万能的,这种场景应该拆分
    duan602728596
        8
    duan602728596  
       Aug 18, 2022
    lodash 和 echarts 按需加载了吗?
    建议使用 lodash-es 替换 lodash 。
    element-plus 应该也是可以按需加载的啊
    图片压缩了吗?
    liubaicai
        9
    liubaicai  
       Aug 18, 2022
    比你的依赖还多,刚试了下,winPC ,算上 ts 的 check 打包 2 分 50 秒,run dev 几秒钟
    liubaicai
        10
    liubaicai  
       Aug 18, 2022
    不知道你大小怎么算的,我的算 node_modules 和.git 目录 591M ,不算 41m ,打包完 12m
    CHTuring
        11
    CHTuring  
       Aug 18, 2022
    楼上的先等一等,不是我不信,我就想看看 600m 的项目打包是什么样子...
    um1ng
        12
    um1ng  
       Aug 18, 2022
    600M...你难道不该先考虑优化一下项目吗
    DCELL
        13
    DCELL  
       Aug 18, 2022
    什么前端项目 600M ,我很想知道,真的,算 node_modules 么
    Hipan
        14
    Hipan  
       Aug 18, 2022
    想看看什么前端大项目那么大
    Charrlles
        15
    Charrlles  
       Aug 18, 2022 via iPhone
    对于大项目的打包,webpack5 完胜 vite ,在持久缓存的加持下,打包基本不会超过 1 分钟
    dengshen
        16
    dengshen  
       Aug 18, 2022 via iPhone
    打包完还有 600m ?问一下你们的服务器宽带是多大?用户能用嘛?
    hzxxx
        17
    hzxxx  
       Aug 18, 2022
    @dengshen 会不会是个桌面客户端呢
    musi
        18
    musi  
       Aug 18, 2022
    600M 是纯代码还是算了依赖
    zzlatan
        19
    zzlatan  
       Aug 18, 2022
    600M 项目包含.git 文件吧 ? 迭代的太多了,这个文件有时候也可能挺大。
    karott7
        20
    karott7  
       Aug 18, 2022
    没见过哪个前端项目有 600M 的,加图片资源也不可能
    xff1874
        21
    xff1874  
       Aug 18, 2022
    vite 是开发的时候快一点,打包还是一样的
    0xffSol
        22
    0xffSol  
    OP
       Aug 18, 2022
    包含 node_modules,项目有 600m
    0xffSol
        23
    0xffSol  
    OP
       Aug 18, 2022
    @musi 算 node_modules
    0xffSol
        24
    0xffSol  
    OP
       Aug 18, 2022
    @xff1874 我以前项目 900 多 M ,用 webpack 打包,也没有那么慢啊
    0xffSol
        25
    0xffSol  
    OP
       Aug 18, 2022
    @liubaicai 这个打包时间跟我差不多,但是有点比 webpack 慢太多了
    xff1874
        26
    xff1874  
       Aug 18, 2022
    @0xffSol vite 上线的打包是 rollup ,估计速度上比 webpack 还是差一点。
    0xffSol
        27
    0xffSol  
    OP
       Aug 18, 2022
    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
       Aug 18, 2022
    @xff1874 主要觉得差太多了,十几分钟打包,webpack2 分钟打包。现在自动化发布,服务器打包每次前端都要 15 分钟,让我优化。我都要炸了
    Sendya
        29
    Sendya  
       Aug 18, 2022 via Android
    你服务器打包,是算上了 npm i ?
    @0xffSol
    0xffSol
        30
    0xffSol  
    OP
       Aug 18, 2022 via iPhone
    @Sendya 没有,同事本地打包也是那么久
    0xffSol
        31
    0xffSol  
    OP
       Aug 18, 2022 via iPhone
    @Sendya 我 mac pro 打包需要 5 分钟
    murongxdb
        32
    murongxdb  
       Aug 19, 2022
    用 vite 启动,webpack 打包呗
    0xffSol
        33
    0xffSol  
    OP
       Aug 19, 2022 via iPhone
    @murongxdb 用的官方脚手架,你有 webpack 配置吗?这样会不会导致开发环境与生产环境不一致,导致 bug 不一样呢
    murongxdb
        34
    murongxdb  
       Aug 19, 2022
    @0xffSol 打包时候用 vue-cli 就行了 启动的时候用 vite
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5839 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 103ms · UTC 03:14 · PVG 11:14 · LAX 20:14 · JFK 23:14
    ♥ Do have faith in what you're doing.