Vite8 Beta来了,Rolldown携手Oxc

总结：由 Rolldown 驱动的 Vite

更新地址

重大更新

先来看看有哪些重大的更新方面

性能：Rolldown 使用 Rust 编写，运行速度与原生应用相当。它的性能水平与 esbuild 相匹配，并且比 Rollup 快 10-30 倍。
兼容性：Rolldown 支持与 Rollup 和 Vite 相同的插件 API。大多数 Vite 插件在 Vite 8 中可以开箱即用。
更多功能：Rolldown 为 Vite 解锁了更多高级功能，包括完整打包模式、更灵活的分块控制、模块级持久缓存、模块联邦等。

javascript 复制代码

Vite（构建工具）
Rolldown（打包器）
Oxc（编译器、压缩器）

统一工具链

javascript 复制代码

打包工具利用
语法解析器（parsers）
依赖解析器（resolvers）
转换器（transformers）
压缩器（minifiers）

Rolldown 为统一工具链使用了由VoidZero 团队主导的项目Oxc

Rolldown

作用：使用Rolldown 替代esbuild 和 Rollup

Vite 8 基于Rolldown 和 Oxc 的工具，而不是 esbuild 和 Rollup

Vite之前的引擎架构------开发用 esbuild，生产用 Rollup

使用 Oxc 转换 JavaScript

使用 Oxc 进行 JavaScript 转换，而不是 esbuild

使用 Lightning CSS 进行 CSS 压缩

默认使用 Lightning CSS 进行 CSS 压缩。你可以使用 build.cssMinify: 'esbuild' 选项切换回 esbuild。请注意，你需要将 esbuild 安装为 devDependency。

Lightning CSS 支持更好的语法降级，你的 CSS 包大小可能会略有增加

一些移除和弃用

我们简单看看一些废弃和弃用的部分

非常重要更新,我建议是正式版出来直接移除esbuild

javascript 复制代码

esbuild 现在已被弃用，将来会被移除

弃用以及将要移除，尽快处理

javascript 复制代码

optimizeDeps.esbuildOptions 弃用 => 将来会被移除


build.rollupOptions.watch.chokidar 移除 
=> 
迁移到 build.rolldownOptions.watch.notify 


build.rollupOptions.output.manualChunks 弃用 
=> 
更新成为 advancedChunks

// advancedChunks文档使用
https://rolldown.rs/in-depth/advanced-chunks


build.rollupOptions
=> 重命名为 build.rolldownOptions

worker.rollupOptions
  => 重命名为 worker.rolldownOptions

build.commonjsOptions：
  => 现在无操作效果

自动转换

javascript 复制代码

esbuildOptions.minify -> rolldownOptions.output.minify
esbuildOptions.treeShaking -> rolldownOptions.treeshake
esbuildOptions.define -> rolldownOptions.transform.define
esbuildOptions.loader -> rolldownOptions.moduleTypes
esbuildOptions.preserveSymlinks -> !rolldownOptions.resolve.symlinks
esbuildOptions.resolveExtensions -> rolldownOptions.resolve.extensions
esbuildOptions.mainFields -> rolldownOptions.resolve.mainFields
esbuildOptions.conditions -> rolldownOptions.resolve.conditionNames
esbuildOptions.keepNames -> rolldownOptions.output.keepNames
esbuildOptions.platform -> rolldownOptions.platform
esbuildOptions.plugins -> rolldownOptions.plugins (partial support)

剩余就是一些其余更新，这里不做阐述,基本也不用看，除非用到了

javascript 复制代码

https://cn.vite.dev/guide/migration#migration-from-v7

项目升级

官方升级建议

官方给我们提供了两种建议适用更新

直接升级：

更新 package.json 并运行常规的开发和构建命令。

适合：自己的项目和博客

渐进式迁移：

先从 Vite 7 迁移到 rolldown-vite 包，然后再到 Vite 8。

这样你可以识别出与 Rolldown 相关的不兼容性或问题，而无需对 Vite 进行其他更改。

适合：较大或复杂的项目或者稳定项目

项目更新

接下来我们就在我们项目之中升级并且使用这些部分

我本地的Node版本为Node 22.16.0

我们本地是vite7，官方的建议是

对于从 rolldown-vite 迁移到 Vite 8 的用户，你可以撤销 package.json 中的依赖变更并更新到 Vite 8

javascript 复制代码

{
  "devDependencies": {
    "vite": "^8.0.0"
  }
}

运行我们的更新命令

javascript 复制代码

pnpm add -D vite@8.0.0-beta.0 @vitejs/plugin-vue@latest

执行完以后可以看到我们安装文件部分更新

javascript 复制代码

"vite": "8.0.0-beta.0",

更新完成以后提示我们

javascript 复制代码

devDependencies:
- vite 7.3.0
+ vite 8.0.0-beta.0

然后正常启动打包都没问题,速度上可能因为我的项目比较小，没有太大的区别，打包的体积确实小了

manualChunks更新

官方之前对于这部分进行了更新，我们配置一下

javascript 复制代码

// 旧写法，Vite 8 直接报错
rollupOptions: {
  output: {
    manualChunks: {
      'vue-vendor': ['vue', 'pinia'],
      'monaco': ['monaco-editor'],
    }
  }
}


// 新写法
rollupOptions: {
  output: {
    advancedChunks: {
      groups: [
        { name: 'vue-vendor', test: /[\\/]node_modules[\\/](vue|pinia)[\\/]/ },
        { name: 'monaco', test: /[\\/]node_modules[\\/]monaco-editor[\\/]/ },
      ]
    }
  }
}