标准答案

  1. 开发阶段关注冷启动、按需转换和热更新速度,Vite 会利用浏览器原生 ESM。
  2. 生产阶段关注产物体积、兼容性、缓存、代码分割和资源优化,仍然需要完整打包。
  3. Rollup 在 ESM 分析、Tree Shaking 和库构建方面比较成熟。
  4. Vite 的插件体系也和 Rollup 有较强关系,很多生产构建能力可以复用 Rollup 插件生态。
  5. 因此 Vite 不是“不打包”,而是开发和生产采用不同的执行策略。

题目解析

Vite 的快主要发生在开发体验上。开发时浏览器可以按需请求模块,服务端只转换被请求的源码,不必一开始就把整个应用打成 bundle。

生产环境不能照搬这个模型。真实用户访问页面时,需要更少请求、更好缓存、更小体积和稳定兼容性,所以仍然要把模块图整理成适合线上分发的产物。

Rollup 的优势在于对 ESM 的静态分析和产物控制。对于 Vite 来说,用 Rollup 做生产构建,是在开发速度和线上产物质量之间做分工。

代码示例

Vite 的配置里可以直接通过 build.rollupOptions 调整生产构建行为。

JavaScript
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router']
        }
      }
    }
  }
}

常见误区

  • 认为 Vite 开发阶段不预打包源码,所以生产阶段也不需要打包。
  • 把 Vite 的速度全部归因于 esbuild,忽略开发服务器模型和生产 Rollup 分工。
  • 迁移到 Vite 后不再检查生产产物体积、chunk 结构和兼容性。

作者信息