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

[0xffSol]

公司项目使用 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"
  }
}

[GreatAuk]

vite 打包是用的 rollup, 速度相对 webpack 没有太大优势。好奇什么前端项目有 600M 大小，你怕不是把 node_modules 算进去了吧。

[angrylid]

@GreatAuk 有没有一种可能，这个项目包括静态图片资源已经达到了 600MB

[fox2081]

Vite 快是启动快，因为实时编译，build 都差不多，不过你这个几分钟肯定是有问题的，啥项目能 600 兆啊，算上 node_modules 了？

[NerbraskaGuy]

antv 这玩意儿很占包体积，之前公司项目有使用这个打包也是巨慢，但是 600M 也有点太夸张了

[lisongeee]

<运行 dev 环境也需要 3 分钟，搞不懂是什么问题！>
可能是你自定义了 UI 库的主题而且用是 sass 一类的变量，导致每次启动都要编译 ui 库的样式
如果你的样式是固定的，你可以设置缓存这个样式文件

[jasonkayzk]

600M 是打包了个 os 内核？

[gouflv]

vite 不是万能的，这种场景应该拆分

[duan602728596]

lodash 和 echarts 按需加载了吗？
建议使用 lodash-es 替换 lodash 。
element-plus 应该也是可以按需加载的啊
图片压缩了吗？

[liubaicai]

比你的依赖还多，刚试了下，winPC ，算上 ts 的 check 打包 2 分 50 秒，run dev 几秒钟

[liubaicai]

不知道你大小怎么算的，我的算 node_modules 和.git 目录 591M ，不算 41m ，打包完 12m

[CHTuring]

楼上的先等一等，不是我不信，我就想看看 600m 的项目打包是什么样子...

[um1ng]

600M...你难道不该先考虑优化一下项目吗

[DCELL]

什么前端项目 600M ，我很想知道，真的，算 node_modules 么

[Hipan]

想看看什么前端大项目那么大

[Charrlles]

对于大项目的打包，webpack5 完胜 vite ，在持久缓存的加持下，打包基本不会超过 1 分钟

[dengshen]

打包完还有 600m ？问一下你们的服务器宽带是多大？用户能用嘛？

[hzxxx]

@dengshen 会不会是个桌面客户端呢

[musi]

600M 是纯代码还是算了依赖

[zzlatan]

600M 项目包含.git 文件吧 ？ 迭代的太多了，这个文件有时候也可能挺大。

[karott7]

没见过哪个前端项目有 600M 的，加图片资源也不可能

[xff1874]

vite 是开发的时候快一点，打包还是一样的

[0xffSol]

包含 node_modules,项目有 600m

[0xffSol]

@musi 算 node_modules

[0xffSol]

@xff1874 我以前项目 900 多 M ，用 webpack 打包，也没有那么慢啊

[0xffSol]

@liubaicai 这个打包时间跟我差不多，但是有点比 webpack 慢太多了

[xff1874]

@0xffSol vite 上线的打包是 rollup ，估计速度上比 webpack 还是差一点。

[0xffSol]

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]

@xff1874 主要觉得差太多了，十几分钟打包，webpack2 分钟打包。现在自动化发布，服务器打包每次前端都要 15 分钟，让我优化。我都要炸了

[Sendya]

你服务器打包，是算上了 npm i ?
@0xffSol

[0xffSol]

@Sendya 没有，同事本地打包也是那么久

[0xffSol]

@Sendya 我 mac pro 打包需要 5 分钟

[murongxdb]

用 vite 启动，webpack 打包呗

[0xffSol]

@murongxdb 用的官方脚手架，你有 webpack 配置吗？这样会不会导致开发环境与生产环境不一致，导致 bug 不一样呢

[murongxdb]

@0xffSol 打包时候用 vue-cli 就行了 启动的时候用 vite