Correction made to my previous Question (Instead ofObfuscate, I'm actually trying to find out Uglify)

I've recently began to work on ReactJS, while I try to bundle to code in production.. I realized all the codes are in readable format. I'm aware of the approach below: Set false to generate sourcemap.

However, this way my code is still kind of readable in terms of my

1. API Endpoint
2. API keys

I'm trying to understand what is the proper way to fully uglify my code in production?

Correction made to my previous Question (Instead ofObfuscate, I'm actually trying to find out Uglify)

I've recently began to work on ReactJS, while I try to bundle to code in production.. I realized all the codes are in readable format. I'm aware of the approach below: Set false to generate sourcemap.

However, this way my code is still kind of readable in terms of my

1. API Endpoint
2. API keys

I'm trying to understand what is the proper way to fully uglify my code in production?

• javascript
• reactjs
• uglifyjs

• You can't obfuscate API endpoint and keys. They're designed to be public. – Guy Incognito Commented May 23, 2020 at 17:21
• Even if code was pletely hidden (which is impossible because it needs to run on the client), you could still open network tab and see all the information there. – HMR Commented May 23, 2020 at 17:21
• You can't. Anything you send to the client will be visible. – Phix Commented May 23, 2020 at 17:22
• adding to the chorus, things on your client have to be safely public. – bryan60 Commented May 23, 2020 at 17:26
• 3 My guess is that you are getting downvotes because people here don't like obfuscated code. It is still a valid question, however. – Jaap Joris Vens Commented May 23, 2020 at 17:30

1 Answer 1

Here's how we can UGLIFY our code in ReactJS.

1. Run npm run eject
2. Run npm install uglifyjs-webpack-plugin --save-dev
3. Go to webpack.config.js at your config folder (you should get this folder after eject)
4. Search for keyword minimize: isEnvProduction then append the following at bottom

minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            press: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
          },
        }),
      ],

If you now build your app npm run build for production environment, and you shall not see your code via Inspect Element.