Vite构建时如何压缩public目录下的JSON文件且不转为JS

方案1：用jq命令行工具直接压缩（简单快速） #

jq是专门处理JSON的工具，能直接压缩空格、制表符和换行符，输出纯JSON文件，不会转成JS模块。

先安装jq（按需选择）：

• macOS：brew install jq
• Linux：sudo apt install jq
• Windows：通过Chocolatey或官网下载安装

执行以下命令，遍历public/data下的所有JSON文件并压缩到dist对应目录：

mkdir -p dist/public/data
for file in public/data/*.json; do
  jq -c . "$file" > "dist/public/data/$(basename "$file")"
done

注：-c参数表示以紧凑格式输出，仅保留JSON结构，去除所有冗余空白字符。

方案2：修改esbuild命令，强制输出纯JSON #

esbuild默认会把JSON转成JS模块，添加以下参数即可输出原扩展名的压缩后JSON文件：

esbuild public/data/*.json --outdir=dist/public/data --allow-overwrite --minify --bundle=false --loader:.json=json --out-extension:.json=.json

参数说明：

• --bundle=false：禁用打包，避免将JSON转为模块
• --loader:.json=json：指定JSON文件的处理方式为纯JSON
• --out-extension:.json=.json：强制输出文件扩展名保持为.json

方案3：在Vite配置中添加自定义插件，构建时自动处理 #

如果希望Vite构建时自动完成压缩操作，无需手动执行命令，可在vite.config.js中添加如下插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs'
import path from 'path'
import { minify } from 'jsonc-parser'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'compress-json',
      enforce: 'post',
      async writeBundle(options) {
        const srcDir = path.resolve(__dirname, 'public/data')
        const destDir = path.resolve(options.dir, 'public/data')
        
        // 确保目标目录存在
        if (!fs.existsSync(destDir)) {
          fs.mkdirSync(destDir, { recursive: true })
        }
        
        // 遍历并处理所有JSON文件
        const files = fs.readdirSync(srcDir).filter(file => file.endsWith('.json'))
        for (const file of files) {
          const srcPath = path.join(srcDir, file)
          const destPath = path.join(destDir, file)
          const content = fs.readFileSync(srcPath, 'utf-8')
          const minified = minify(content, {})
          fs.writeFileSync(destPath, minified, 'utf-8')
        }
      }
    }
  ]
})

先安装依赖：

npm install jsonc-parser --save-dev

之后执行vite build时，插件会自动读取public/data下的JSON文件，压缩后输出到dist对应目录，运行时可正常通过fetch按需获取。

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