如何在Vite构建时同时保留压缩与未压缩的JS文件？

方法一：执行两次构建命令 #

通过配置不同构建模式，分别生成压缩和未压缩版本，适合简单场景：

1. 修改package.json的scripts，新增两个构建命令：

{
  "scripts": {
    "build": "npm run build:min && npm run build:unmin",
    "build:min": "vite build",
    "build:unmin": "vite build --mode unminified"
  }
}

2. 在vite.config.js中根据模式切换配置：

import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  const isUnminified = mode === 'unminified'
  return {
    build: {
      minify: !isUnminified,
      // 可选：输出到不同目录或用文件名区分版本
      outDir: isUnminified ? 'dist/unminified' : 'dist/minified',
      rollupOptions: {
        output: {
          entryFileNames: isUnminified ? '[name].unmin.js' : '[name].min.js',
          chunkFileNames: isUnminified ? '[name].unmin.js' : '[name].min.js'
        }
      }
    }
  }
})

执行npm run build即可同时生成两个版本的文件。

方法二：单次构建生成双版本（更高效） #

通过配置Rollup的多输出格式，一次构建同时生成压缩和未压缩文件，无需重复执行构建：

1. 先安装依赖（若使用terser压缩）：

npm install rollup-plugin-terser --save-dev

2. 修改vite.config.js：

import { defineConfig } from 'vite'
import { terser } from 'rollup-plugin-terser'

export default defineConfig({
  build: {
    rollupOptions: {
      output: [
        // 压缩版本
        {
          format: 'es', // 可根据项目需求调整为umd、cjs等格式
          entryFileNames: '[name].min.js',
          chunkFileNames: '[name].min.js',
          plugins: [terser()]
        },
        // 未压缩版本
        {
          format: 'es',
          entryFileNames: '[name].js',
          chunkFileNames: '[name].js',
          minifyInternalExports: false
        }
      ]
    }
  }
})

如果偏好Vite默认的esbuild压缩工具，可替换为esbuild压缩逻辑：

import { defineConfig } from 'vite'
import esbuild from 'esbuild'

export default defineConfig({
  build: {
    rollupOptions: {
      output: [
        {
          format: 'es',
          entryFileNames: '[name].min.js',
          chunkFileNames: '[name].min.js',
          plugins: [
            {
              name: 'esbuild-minify',
              transform(code) {
                return esbuild.transformSync(code, { minify: true })
              }
            }
          ]
        },
        {
          format: 'es',
          entryFileNames: '[name].js',
          chunkFileNames: '[name].js'
        }
      ]
    }
  }
})

执行vite build后，dist目录下会同时出现带.min.js后缀的压缩文件和无后缀的未压缩文件。

注意事项 #

• 多入口项目中，两种方案都会自动为每个入口生成对应版本的文件
• 可根据需求自定义文件名规则，比如将未压缩文件命名为[name].unmin.js
• 方法二仅需一次构建流程，效率更高，推荐优先使用

内容的提问来源于stack exchange，提问作者Wyse