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

2022-08-18 09:32:07 +08:00
 0xffSol

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

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

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

{
  "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"
  }
}
4744 次点击
所在节点    程序员
34 条回复
GreatAuk
2022-08-18 09:39:41 +08:00
vite 打包是用的 rollup, 速度相对 webpack 没有太大优势。好奇什么前端项目有 600M 大小,你怕不是把 node_modules 算进去了吧。
angrylid
2022-08-18 09:46:13 +08:00
@GreatAuk 有没有一种可能,这个项目包括静态图片资源已经达到了 600MB
fox2081
2022-08-18 09:54:12 +08:00
Vite 快是启动快,因为实时编译,build 都差不多,不过你这个几分钟肯定是有问题的,啥项目能 600 兆啊,算上 node_modules 了?
NerbraskaGuy
2022-08-18 10:13:05 +08:00
antv 这玩意儿很占包体积,之前公司项目有使用这个打包也是巨慢,但是 600M 也有点太夸张了
lisongeee
2022-08-18 10:17:57 +08:00
<运行 dev 环境也需要 3 分钟,搞不懂是什么问题!>
可能是你自定义了 UI 库的主题而且用是 sass 一类的变量,导致每次启动都要编译 ui 库的样式
如果你的样式是固定的,你可以设置缓存这个样式文件
jasonkayzk
2022-08-18 10:20:04 +08:00
600M 是打包了个 os 内核?
gouflv
2022-08-18 10:20:31 +08:00
vite 不是万能的,这种场景应该拆分
duan602728596
2022-08-18 10:47:21 +08:00
lodash 和 echarts 按需加载了吗?
建议使用 lodash-es 替换 lodash 。
element-plus 应该也是可以按需加载的啊
图片压缩了吗?
liubaicai
2022-08-18 10:58:29 +08:00
比你的依赖还多,刚试了下,winPC ,算上 ts 的 check 打包 2 分 50 秒,run dev 几秒钟
liubaicai
2022-08-18 11:01:48 +08:00
不知道你大小怎么算的,我的算 node_modules 和.git 目录 591M ,不算 41m ,打包完 12m
CHTuring
2022-08-18 11:07:09 +08:00
楼上的先等一等,不是我不信,我就想看看 600m 的项目打包是什么样子...
um1ng
2022-08-18 11:08:28 +08:00
600M...你难道不该先考虑优化一下项目吗
DCELL
2022-08-18 11:16:59 +08:00
什么前端项目 600M ,我很想知道,真的,算 node_modules 么
Hipan
2022-08-18 12:02:48 +08:00
想看看什么前端大项目那么大
Charrlles
2022-08-18 12:42:12 +08:00
对于大项目的打包,webpack5 完胜 vite ,在持久缓存的加持下,打包基本不会超过 1 分钟
dengshen
2022-08-18 13:03:55 +08:00
打包完还有 600m ?问一下你们的服务器宽带是多大?用户能用嘛?
hzxxx
2022-08-18 13:46:24 +08:00
@dengshen 会不会是个桌面客户端呢
musi
2022-08-18 14:25:34 +08:00
600M 是纯代码还是算了依赖
zzlatan
2022-08-18 14:54:32 +08:00
600M 项目包含.git 文件吧 ? 迭代的太多了,这个文件有时候也可能挺大。
karott7
2022-08-18 16:58:06 +08:00
没见过哪个前端项目有 600M 的,加图片资源也不可能

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/873639

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX