能否对采用Vue3、TypeScript组合式API及ViteJS的项目进行代码压缩？

完全可行，Vite本身内置生产环境压缩能力，针对全栈场景（前端+Node后端）可分别配置：

前端代码压缩 #

Vite生产构建默认启用esbuild压缩，速度快且兼容性好，也可切换为terser实现更极致的压缩效果。

1. 默认esbuild压缩（推荐） #

在vite.config.ts中可自定义压缩规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'esbuild', // Vite默认值，可省略
    esbuild: {
      // 开启标识符、语法、空白字符压缩
      minifyIdentifiers: true,
      minifySyntax: true,
      minifyWhitespace: true,
      // 移除生产环境的console和debugger
      drop: ['console', 'debugger']
    }
  }
})

2. Terser压缩（需自定义复杂规则时用） #

先安装依赖：

npm install terser --save-dev

再配置vite.config.ts：

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        // 可添加更多自定义压缩规则，比如死代码消除、变量合并等
      }
    }
  }
})

后端代码压缩（TypeScript Node服务） #

如果全栈包含TS编写的Node服务，可通过以下方式压缩：

1. 用esbuild直接打包压缩 #

在package.json中添加构建脚本：

"scripts": {
  "build:server": "esbuild src/server/index.ts --bundle --minify --platform=node --outfile=dist/server.js"
}

执行npm run build:server即可得到压缩后的后端服务文件。

2. 用Rollup配合压缩插件 #

如果用Rollup打包后端代码，可安装rollup-plugin-terser，在Rollup配置中启用压缩：

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

配置示例：

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

export default {
  input: 'src/server/index.ts',
  output: {
    file: 'dist/server.js',
    format: 'cjs'
  },
  plugins: [terser()]
}

注意事项 #

• 压缩时避免误删必要代码，比如全局变量、环境变量、第三方依赖的保留符号，可通过压缩工具的keep_fnames、reserved等参数配置。
• Vue3组合式API写法完全兼容现有压缩工具，只要TS代码编译为标准JS即可，无需额外适配。
• 仅需压缩TS/JS代码，数据库、静态资源等无需处理。

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