如何在Vite library模式下实现构建代码的混淆与压缩

有可落地的配置方案，根据需要的混淆强度选对应方案即可。

Vite 普通网页构建默认会通过 esbuild 完成全量代码压缩、标识符混淆、死代码消除，切到 library 模式后，默认配置为了避免破坏库对外导出的接口、保留基础调试能力，会大幅降低压缩混淆强度，才会出现产物代码完全可读的情况。

方案1：内置配置实现基础压缩混淆（无额外依赖） #

不需要安装第三方插件，直接调整 vite 配置即可，构建速度和普通应用构建基本一致，适合不需要高强度反编译防护的场景。

配置示例：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      formats: ['es', 'cjs', 'umd'], // 按需选择需要输出的产物格式
      name: 'YourLibGlobalName' // umd 格式下必填，为库挂载到全局的变量名
    },
    // 强制开启 esbuild 压缩
    minify: 'esbuild',
    sourcemap: false, // 关闭 sourcemap 避免源码泄露
    esbuild: {
      drop: ['console', 'debugger'], // 移除所有 console 和 debugger 语句
      mangleProps: /^_/, // 混淆下划线开头的内部私有属性
      legalComments: 'none', // 移除所有版权注释、手动注释
      treeShaking: true // 开启摇树优化，移除未使用代码
    }
  }
})

注意：该配置只会混淆内部非导出的变量、私有属性，不会修改对外暴露的接口名，不会影响外部引入使用。

方案2：插件实现高强度混淆（防反编译场景） #

如果需要更高的混淆强度，避免产物被轻易反编译，可以引入 JS 混淆插件做二次处理。

1. 首先安装开发依赖：

npm i vite-plugin-javascript-obfuscator -D

2. 修改 vite 配置：

import { defineConfig } from 'vite'
import obfuscator from 'vite-plugin-javascript-obfuscator'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      formats: ['es', 'cjs', 'umd'],
      name: 'YourLibGlobalName'
    },
    minify: 'esbuild',
    sourcemap: false
  },
  plugins: [
    obfuscator({
      include: ['src/**/*.ts', 'src/**/*.js'],
      exclude: [/node_modules/],
      options: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.7,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: true,
        disableConsoleOutput: true,
        identifierNamesGenerator: 'mangled',
        log: false,
        numbersToExpressions: true,
        renameGlobals: false, // 严禁开启该配置，否则会破坏库的导出接口
        selfDefending: true,
        simplify: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        stringArray: true,
        stringArrayCallsTransform: true,
        stringArrayEncoding: ['rc4'],
        stringArrayIndexShift: true,
        stringArrayRotate: true,
        stringArrayShuffle: true,
        stringArrayWrappersCount: 2,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersParametersMaxCount: 4,
        stringArrayWrappersType: 'function',
        stringArrayThreshold: 0.75,
        unicodeEscapeSequence: false
      }
    })
  ]
})

配置注意事项 #

• 混淆强度越高，构建速度越慢，产物包体积也会有对应上涨，可根据实际需求调整各项阈值参数平衡防护效果、构建速度和包体积
• 所有会修改全局变量名、导出对象属性名的配置项都不要开启，否则会导致外部引入库时找不到对应方法，直接运行报错
• 混淆流程只会处理 JS 产物，不会影响 TS 类型声明文件，对外的类型提示能力不受影响

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