Why my code is not minified on production? I can see my entire React code

[Steffi3rd]

Summary

I just realized that my files are entire visible when console.log is display. (Yeah it was a mistake for the log) but even that, IMO it doesn't seem good to see my entire React code not minified.

Is that normal ?
Do I miss an option when building?

In case it's normal, how to minife/hide that?

Relevant information

Here is a screenshot for production.
Accessible via Chrome > Source.

Environment (if relevant)

gatsby info --clipboard

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.19.2 - ~/.yarn/bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 73.0.1
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.0.0 => 2.15.24 
    gatsby-cli: ^2.4.16 => 2.7.50 
    gatsby-image: ^2.0.26 => 2.2.21 
    gatsby-plugin-emotion: ^4.0.1 => 4.1.7 
    gatsby-plugin-google-tagmanager: ^2.1.4 => 2.1.10 
    gatsby-plugin-manifest: ^2.2.13 => 2.2.18 
    gatsby-plugin-mdx: ^1.0.44 => 1.0.44 
    gatsby-plugin-netlify: ^2.0.12 => 2.1.15 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.1.8 
    gatsby-plugin-sharp: ^2.0.17 => 2.2.25 
    gatsby-plugin-sitemap: ^2.2.3 => 2.2.14 
    gatsby-source-filesystem: ^2.0.12 => 2.1.26 
    gatsby-transformer-sharp: ^2.1.10 => 2.2.17 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[wardpeet]

@Steffi3rd what command did you run to build your site? gatsby build? It should minify everything, can you try opening the file in your browser through view source?
view-source:<URL to file>. Gatsby uses sourcemaps to prettify your code so you can easily debug when using devtools, this has no performance implications for normal users.

[Steffi3rd]

To build :

"build": "gatsby clean && gatsby build"

view-source:MyURLInProduction.com displays HTML/CSS minified content. It's good here.

But I'm talking about React code for not normal users but (dev) users who are looking JS.

IMO, in production, React code shouldn't visible as the same as I see it in VS Code...
I think it should be minified or compiled, I don't know.

Do you understand what I mean or it's not a big deal?

Because by seeing the screenshot below, (dev) users can see thee entire structure of my React projects.

[Steffi3rd]

Or the solution is to not use console.log in production. So that way, (dev) users cannot find easily the pretty React code? 🤔

[wardpeet]

@Steffi3rd can you send you your site to me? Perhaps over email ? ward@gatsbyjs.com

[Steffi3rd]

@wardpeet Yes, done. Let me know. Thank you 🙏

[wardpeet]

I've looked at your code and everything is minified correctly. The reason why you see the code is because of sourcemaps. It's only used when having devtools open, it has no performance downside.

If you want to look how your code actually looks like you can disable source-maps using devtools settings:

Thank you for opening this, @Steffi3rd

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[Steffi3rd]

Yes, thank you Ward I understand now.

I just found some issues about my issue :

• v2 - Don't generate source maps by default
  v2 - Don't generate source maps by default #3817

• Gatsby: Disable source maps in production
  https://blog.marcnuri.com/gatsby-disable-source-maps-production/

I even found a plugin that solve my problem :
https://www.npmjs.com/package/gatsby-plugin-no-sourcemaps

🙏

[wardpeet]

sourcemaps are a great way to find issues with your bundle. There is no harm in exposing them. If you feel like you rather not generate them, that's cool.

[marcotuna]

I've tried the above solutions but none worked so far.

const config = getConfig()
console.log(JSON.stringify(config, null, 4))

I've tried to dump the webpack configuration and found this:

...
"minimizer": [
            {
                "options": {
                    "test": {},
                    "extractComments": false,
                    "sourceMap": true,
                    "cache": true,
                    "parallel": true,
                    "exclude": {},
...

Apparently sourceMap keeps enabled in this section for some reason.
I've tried the following configuration but it seems that sourceMap keeps enabled

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  actions.setWebpackConfig({
    mode: 'production',
    devtool: false,
    optimization: {
      minimizer: [
        new TerserPlugin({
          cache: false,
          parallel: true,
          sourceMap: false,
        }),
      ]
    } 
  })
}

Any idea of why this is happening?

[marcotuna]

I'm going to add a quick update, the files that I was trying to remove the sourceMap are from gatsby-plugin-netlify-cms, I need to remove .map files due to a limitation on file upload size.
Directory: public/admin