Minify: Class completly removed from output file (by dead code extension)

[jogibear9988]

I've a polymer project, where babel/minify removes a complete class declaration from my File. Can this happen? Does minify remove classes?

[jogibear9988]

Input:

'use strict';

class FilterPanelWrapper {

    constructor(filterDataGrid) {
    }

    init(params) {
        this.filterDataGrid = params.filterDataGrid;
        this.valueGetter = params.valueGetter;
        this.filter = null;
        this.setupGui(params);
    }

    setupGui(params) {
        this.filterpanel = document.createElement('filter-panel');
        this.filterpanel.filterDataGrid = this.filterDataGrid;
        this.filterpanel.propertyName = params.colDef.propertyName;
        this.filterpanel.className = params.colDef.className;
        // this.filterpanel.filter = params;

        var that = this;
        this.filterpanel.addEventListener('filterChanged',
            function(e) {
                that.filter = that.filterpanel.filter;
                params.filterChangedCallback();
            });
    }

    getModelAsString() {
        return this.filterToString(this.filter);
    }

    filterToString(filter) {
        if (filter) {
            let tx = "";
            for (let f of filter) {
                if (tx != "") {
                    if (f.orConnection) {
                        tx += " or";
                    } else {
                        tx += " and";
                    }
                }
                if (f.negated) {
                    tx += " not";
                }
                tx += " " + f.type;
                if (f.type != "isnull" && f.type != "isnotnull")
                    tx += " '" + f.filter + "'";
            }
            return tx;
        }
        return "";
    }

    getGui() {
        return this.filterpanel;
    }

    doesFilterPass(params) {
        return true;
    }

    isFilterActive() {
        return this.filter !== null && this.filter !== undefined && this.filter !== '';
    }

    getApi() {
        return this;
    }

    getModel() {
        if (this.filter === undefined) {
            return null;
        }

        return this.filter;
    }

    setModel(model) {
        if (model != null)
            this.filter = model.filter;
        else
            this.filter = null;
    }
}

output:

'use strict';

[jogibear9988]

problem is, i can not add for example ("export default") because browsers javascript interpreter does not understand, and i also wanted to use without compiling (transpiling)

[Andarist]

What's your use case though? Why would you like to have FilterPanelWrapper retained here? It stays unused in the example.

[jogibear9988]

In the Example yes, but it is used in a complex app which is Bundeled using Polymer-Cli. And there the class is also removed.

Is there a way to tell minify to keep the class?

[Andarist]

I don't believe there is such option now, but I could be wrong. You'd have to share more complete setup to get a help. We cannot know why the class was removed by looking just on the class declaration.

[jogibear9988]

Don't know how polymer-cli minifies? Maybe it does it file by file ?

But I think maybe we need such an option! It can be that in Code no-one instantiates a class, maybe its done in eval

[Andarist]

Don't know how polymer-cli minifies? Maybe it does it file by file ?

I have no experience with the polymer-cli, so unfortunatelt without seeing the setup I cannot help any further.

But I think maybe we need such an option! It can be that in Code no-one instantiates a class, maybe its done in eval

There are really rare cases when eval should be used, most of modern bundlers use strict mode by default and eval won't work in generated code (unless you opt-out from the strict mode). If you want to share the class for external usage I would suggest exporting it from the file or maybe even assign it to window. I don't know how you build your files etc but nowadays in most cases source code won't run as is in browser - some build steps are often required and it's the output file which should be used in the browser.

[jogibear9988]

My complete applications runs without using compiling or bundling. It's only using plain js & webcomponents. I see no advantage of a build, I could test so much faster.

My app is about 10mb, atm I don't know how to strip it down. And I for myself don't know how and when polymer-cli does the minification. I have not one big ".js" file where only the javascript code is (like in an angular app).

But I'm not sure if it's correct to remove root class definitions from a file, only because they are not used. They also could be used from a lazy loaded part of the program later.

I fxed it now adding

var _tmp = FilterPanelWrapper;

at the end

[Andarist]

Minifiers often assume that they are run on the complete application where they can assume that everything is in the local scope and thanks to that they can analyze the source's content and optimize with techniques such as dead code elimination. Sharing code through the global namespace is not a good programming practice anyway.

[jogibear9988]

I'll understand. But I think we should have an option to keep class declarations. Or to keep functions/classes defined in the root of the file

[Andarist]

I agree that some option to bail out from this should be added. UglifyJS has one, but also it has it for mostly historic reasons - it's around for so long time and the JS module systems were way less sophisticated back then. Nowadays there should be no real reason to create applications without having modules in mind.

[jogibear9988]

Yes, but I would use Javascript modules at first when there is Browser support for them.

[Andarist]

In most of the newest versions of the browser the support is there. But there are also other considerations than browser support. In fact for performant application / websites using modules in browsers is not advised. Modules will stay for quite some time as very useful authoring format, but the files need to be concatenated (possibly into multiple files, not all in one) for the best performance.

It's pretty much the same situation as with minifiers - you don't want to write uglified code, you just handle your sources to a tool which does its job, because you don't want to ship unminified code to the browser due to performance issues.

[jogibear9988]

Yes, I will not ship my unminified Code, but it is much easier to test if I don't need to build. I don't see any advantage in using a Scripting language, if it does not work without a build.

With HTTP2 Polymer suggests not to bundle!!! https://www.polymer-project.org/2.0/toolbox/build-for-production#to-bundle-or-not-to-bundle

[nicolo-ribaudo]

Does polymer allow you to pass options to the minifier? You could use "deadcode": false.

[jogibear9988]

i know, but that will stop the plugin completely... (and polymer cli needs to be extended so passing parameters to minify is possible)
but maybe I want that some dead code is removed (if this is possible)