Vite 8 发布 beta 版本了,升级体验一下 Rolldown

Vite 8 发布 beta 版本了,升级体验一下 Rolldown

编译时间

当前是用 beta.2 版本,因为测试项目非常的小(真实项目),编译时间是从大概 260ms 到 80ms 的量级 🐶,这可能是个不公平的对比,因为发现 rolldown 第一次也是 260+ms,然后原地再编译才是前面的结果(有cache?),也就是 rollup 始终差不多的速度不区分第一次,再次编译 rolldown 会快, 区分是不是第一次。

vite.config 的变化

我有一个特殊的需求,就是每个页面都非常小,而且页面不多,希望是不要生成那么多 js 文件,所以之前的做法是 rollup 的选项。

js 复制代码
rollupOptions: {
    output: {
        manualChunks(id) {
            if (id.includes('pages')) {
                return 'pages'
            }
        }
    }
}
// 之前的结果 vite7 rollup
// dist/index.html                  0.45 kB │ gzip:  0.30 kB
// dist/assets/style-D2W9t87U.css   5.50 kB │ gzip:  1.58 kB
// dist/assets/index-D5uKrQyu.js   28.56 kB │ gzip: 11.05 kB
// dist/assets/pages-BL4EWsDv.js   83.42 kB │ gzip: 32.14 kB

rolldown 没有这个概念,manualChunks 对等的是 advancedChunks,折腾半天 advancedChunks 达不到想要的效果(可能是针对 node_modules 比较强,可能是没找对方法),找了半天找到一个方法可以做到,这个做法对我的项目有用,但是大项目应该不行,所有项目文件都生成一个文件了。

js 复制代码
rolldownOptions: {
    output: {
        inlineDynamicImports: true
    }
}
// rolldown 的输出内容多了一个 rolldown-runtime
// dist/index.html                           0.54 kB │ gzip:  0.31 kB
// dist/assets/style-Bac8aBaN.css            5.46 kB │ gzip:  1.56 kB
// dist/assets/rolldown-runtime-BcdYIZKG.js  0.19 kB │ gzip:  0.17 kB
// dist/assets/index-pOi5csA0.js             25.03 kB │ gzip:  9.38 kB
// dist/assets/vendor-p3Su3_y3.js            85.17 kB │ gzip: 33.12 kB

不加上面选项的结果

text 复制代码
// 文件很多 vite 8 & rolldown, vite 7 类似
dist/index.html                     0.45 kB │ gzip:  0.29 kB
dist/assets/style-Bac8aBaN.css      5.46 kB │ gzip:  1.56 kB
dist/assets/not-found-DAToitwy.js   0.12 kB │ gzip:  0.13 kB
dist/assets/api-Br4_g19J.js         0.42 kB │ gzip:  0.17 kB
dist/assets/home-BSTox8wn.js        0.59 kB │ gzip:  0.38 kB
dist/assets/things-BUk3p1b5.js      0.83 kB │ gzip:  0.53 kB
dist/assets/eol-WmdroNCa.js         1.88 kB │ gzip:  0.97 kB
dist/assets/angling-Bh7xqOUY.js     1.92 kB │ gzip:  0.78 kB
dist/assets/fin-5dWvAvtB.js         1.97 kB │ gzip:  0.87 kB
dist/assets/genuine-DKX79-2_.js     2.40 kB │ gzip:  1.01 kB
dist/assets/frame-main-CGg78mi8.js  2.41 kB │ gzip:  1.27 kB
dist/assets/pc-hLrRv_Pv.js          2.55 kB │ gzip:  0.68 kB
dist/assets/vers-COZW8I_8.js        2.90 kB │ gzip:  1.15 kB
dist/assets/index-CbFw2-HB.js       3.76 kB │ gzip:  1.60 kB
dist/assets/about-BcSEGuXl.js       4.18 kB │ gzip:  2.39 kB
dist/assets/vendor-BMuo1oit.js      84.70 kB │ gzip: 32.75 kB

结论

  • 只依赖 vue, vue-router 的项目没问题,生产可用。
  • rolldown 的 node_modules 大小居然比 vite7 的 esbuild 和 rollup 的还大了一点 47.5MB > 35.2MB 🥴
json 复制代码
"dependencies": {
    "vue": "^3.5.25",
    "vue-router": "^4.6.4"
},
"devDependencies": {
    "@vitejs/plugin-vue": "^6.0.3",
    "vite": "^8.0.0-beta.2"
}
相关推荐
于慨18 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz18 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶18 小时前
前端交互规范(Web 端)
前端
CHU72903518 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing18 小时前
Page-agent MCP结构
前端·人工智能
王霸天18 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航18 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界18 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript
PieroPc18 小时前
一个功能强大的 Web 端标签设计和打印工具,支持服务器端直接打印到局域网打印机。Fastapi + html
前端·html·fastapi
悟空瞎说18 小时前
深入 Vue3 响应式:为什么有的要加.value,有的不用?从设计到源码彻底讲透
前端·vue.js