Production with `mangle: true` breaks components

[khakiout]

In production mode, it's recommended to use mangle: true for UglifyJS. Unfortunately, when we add that option, the mappings of the react components to AEM components gets lost.

Is there a solution for this?

[khakiout]

Hello, I made it work by keeping the function names, the file got bigger obviously. Although smaller that development setup.

Here is sample config

  mangle: {
    keep_fnames: true
  },
  compress: {
    ...
    keep_fnames: true,
  }

Let me know if you have a better solution for this.

[stemey]

Can you tell me which function names are the problem here? Is it on the server or in the browser? On the server we actually need to keep function names intact, because java makes calls to the JS API (something like AemGlobal.renderComponents). That is probably the issue here. We can probably get around that by explicitly creating an object hash with that function.

AemGlobal = {renderReactComponents : ()=> {....}}

[khakiout]

yes, this happens on the server. I haven't tested on the client side yet because it already breaks on the page/server load.

i'll take a look on how to create an object hash of functions.

[stemey]

You could also simply turn off uglify for the server. It isn't really useful for the server.

[khakiout]

I turned off uglify on the server but still had to keep the names from being mangled for the client. Anyway, I think this is good enough. 👍

Thanks!