Suppose you have the following ES6 code:
And you want to have a refactor safe way to output the service name without instantiating an object. With some googling, you will probably use the following approach:
This will work fine in dev, until you decide to minify it with webpack. You see, by default, class names will be minified, and at runtime the above code line will become something like
Ab.name, which is far from desired output.
If you use this name to register an AngularJs component, or have any other hard dependency on it, you will get a runtime error and application will most likely crash.
As always, there are multiple ways to solve the problem. If your minification plugin supports it, you should provide a flag that would tell it not to minify class names. Usually you should consult the official documentation of the plugin, webpack docs, Stack Overflow or otherwise.
I am using
esbuild-loader with webpack, so I will provide an easy fix for this scenario. Just add
keepNames: true in the options. Ignore the …, it’s only there to give a better idea of the document structure, skipping unnecessary details:
That’s it, now your production build will preserve class names and will work exactly like your dev build. If you are wondering why I am using function syntax - it’s a lot easier to incorporate environment variable support with it. Object syntax is very limited in this regard.
JS world moves pretty quickly, it is sometimes difficult to find a working combination of tool versions, so I will provide a list of package versions from
If you want to know more about other flags available in
esbuild, you should take a look at their Github page. Take a look at tickets, releases, take part in discussions and perhaps even contribute. For example, here is a commit for when
keepNames was introduced.
esbuild-loader could be lagging behind the official
esbuild version, please keep that in mind. It is by design, to make sure only stable features are available for use in their package. Fortunately for this issue, the fix was put in on Nov 11, 2020, giving it enough time to appear under