How do I minify the addon code?

Questions Build Issues
1

Hi there! I am working on the ember-attacher addon and want it to be as lightweight as possible.

However, I’ve noticed that the addon’s code is not minified in the production build. All the long methods and variable names in the components (like “_addListenersForHideEvents”)persist in the code. Is the minification possible? How should I do it?

Should I put some additional configuration to the addon’s code or to my app one?

2

Curious how you analyzed this. And also which app (addon dummy app? or a consuming “real” app?). The “truest” way would be to build the app and look in the vendor javascript in the /dist assets. If you’re looking at it in the browser you may get sourcemaps (if you’re building them) so even if the code is minified you’ll see sourcemapped code in the source inspector.

In the classic Ember build system the ember-cli app build settings are what you would change to configure this. Although IIRC by default production builds are minified and not sourcemapped.

3

Hi @dknutsen! Thanks for reply

I’ve tried both “real” and “dummy” app by running ember build -prod and searching through the /dist app. For instance, in the “real” app, I’ve found the vendor-[postfix].js file that contains all the method names being not minified. In my app’s ember-cli-build I have the following

...
'ember-cli-terser': {
      enabled: isRelease,  // env === "production"
      exclude: ['vendor.js'],
      hiddenSourceMap: true,
},

I’ve tried to do exclude: [], but had no luck – all the methods’ names remain unchanged. Am I missing something?

P. S. Of course, the “real” app is the top priority, but I would like to configure the “dummy” one properly as well.

4

Sorry I should have been more careful reading your initial post.

All the long methods and variable names in the components (like “_addListenersForHideEvents”)persist in the code.

If by this you’re referring to component/class properties and methods, this is by design. The reason being it’s extremely difficult to tell what code is “safe” to mangle and what code isn’t. If you want to attempt it for private methods maybe you can get away with it but I’d refer you to all the warnings in the terser docs for that

5

Oh, I see, my bad I haven’t consulted with the terser’s docs. Thank you! I’ll try to experiment with this. But still, the question is - is it possible to configure it in the addon’s code, or it can be done only in the apps that use it?

6

In short I think the rule of thumb is that you always leave it up to the app bundler. In classic (v1) ember addons this is definitely the case. In a regular javascript library it depends, I think the norm is still to publish the raw code and let the bundler handle minification etc (letting the user of the library decide how to handle things like this). But obviously a lot of libraries publish “dist” assets which are typically pre-compiled, minified, etc in esm/umd/cjs formats. For example tippy publishes all of the above in npm as well as the source.

7

Many thanks @dknutsen!