如何在Vite环境下隐藏React.js源码并禁用Sourcemap？

一、禁止生成Sourcemap #

在Vite中禁用Sourcemap非常简单，只需修改项目根目录下的vite.config.js（或vite.config.ts）文件，在build配置项中将sourcemap设为false即可：

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

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: false // 生产构建时不再生成Sourcemap文件
  }
})

这个配置和你之前在create-react-app中设置GENERATE_SOURCEMAP=false的作用完全一致。

二、实现类似Webpack的代码压缩与少文件输出效果 #

Vite默认基于Rollup打包，通过调整配置可以达到和Webpack相近的代码混淆、文件合并效果：

1. 增强代码混淆，让代码几乎不可读 #

Vite生产环境默认启用压缩，但可以切换到Terser并自定义配置来强化混淆程度：

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: false,
    minify: 'terser', // 用Terser替代默认的esbuild，混淆效果更强
    terserOptions: {
      compress: {
        drop_console: true, // 移除所有console语句
        drop_debugger: true // 移除debugger断点
      },
      mangle: {
        toplevel: true, // 混淆顶层作用域的变量名
        keep_classnames: false, // 不保留类的原名
        keep_fnames: false // 不保留函数的原名
      }
    }
  }
})

2. 减少输出的JS文件数量 #

通过配置Rollup的manualChunks可以控制代码分割逻辑，甚至将所有代码打包到单个文件中：

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        // 取消默认的代码分割，所有代码打包进一个文件
        manualChunks: () => 'index.js'
      }
    }
  }
})

如果担心单个文件体积过大，也可以自定义manualChunks规则，比如将第三方依赖单独打包，业务代码合并，平衡文件数量和加载性能。

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