• 请不要在回答技术问题时复制粘贴 AI 生成的内容
0xffSol
V2EX  ›  程序员

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

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