JavaScript Obfuscation for React and Vue Apps

Obfuscating JavaScript in Modern Frontend Frameworks

React, Vue, and other modern frontend frameworks present unique considerations for JavaScript obfuscation. Unlike single-file scripts, these apps are bundled by tools like Webpack or Vite, which changes the workflow significantly.

The Challenge: Bundled Code

Modern frontend apps don't ship as single JS files — they're compiled into one or more bundles. Obfuscating individual source files before bundling doesn't work well because the bundler will process and potentially transform them. The right approach is to obfuscate the bundle output as the final build step.

React + Webpack: webpack-obfuscator

The webpack-obfuscator plugin integrates directly with your Webpack config, running obfuscation as part of the build process:

npm install --save-dev webpack-obfuscator

// webpack.config.js (production only)
const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
  mode: 'production',
  plugins: [
    new WebpackObfuscator({
      rotateStringArray: true,
      stringArray: true,
      stringArrayEncoding: ['base64'],
      deadCodeInjection: false,
      selfDefending: true,
      compact: true
    }, [])
  ]
};

The second argument is an array of bundle names to exclude from obfuscation — useful for excluding vendor bundles (React itself, third-party libraries).

React + Vite: vite-plugin-javascript-obfuscator

npm install --save-dev vite-plugin-javascript-obfuscator

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import obfuscatorPlugin from 'vite-plugin-javascript-obfuscator';

export default defineConfig({
  plugins: [
    react(),
    obfuscatorPlugin({
      options: {
        compact: true,
        stringArray: true,
        rotateStringArray: true,
        selfDefending: true
      }
    })
  ],
  build: { minify: false } // Let obfuscator handle this
});

Vue + Webpack

Vue CLI projects use Webpack internally. You can configure webpack-obfuscator through vue.config.js:

// vue.config.js
const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new WebpackObfuscator({ stringArray: true, compact: true }, [])
      );
    }
  }
};

What to Obfuscate (and What Not To)

Obfuscating your entire React or Vue bundle, including React's own code, is wasteful and can cause performance issues. The vendor bundle (React, ReactDOM, Vue core) should be excluded — these are already public. Focus obfuscation on your application code only.

Use Webpack's code splitting to isolate sensitive modules into separate chunks, then apply obfuscation only to those chunks.

Source Maps

Never deploy obfuscated builds with source maps. Source maps completely undo obfuscation. In your production build config, ensure devtool: false (Webpack) or sourcemap: false (Vite). Source maps are fine for development builds, just never in production.