New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ivy compiler output of CommonModule is not optimal for tree-shaking #28077

Open
alan-agius4 opened this Issue Jan 11, 2019 · 1 comment

Comments

Projects
None yet
3 participants
@alan-agius4
Copy link
Contributor

alan-agius4 commented Jan 11, 2019

馃悶 bug report

Description

When using ivy in compatibility mode, with platformBrowser, the final bundle is not optimal for tree-shaking. As in the final bundle the CommonModule references all module definitions and thus they are marked as used and cannot be dropped by webpack.

var CommonModule = /** @class */ /*@__PURE__*/ (function () {
    function CommonModule() {
    }
    /*@__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["傻setClassMetadata"](CommonModule, [{
            type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"],
            args: [{
                    declarations: [COMMON_DIRECTIVES, COMMON_PIPES],
                    exports: [COMMON_DIRECTIVES, COMMON_PIPES],
                    providers: [
                        { provide: NgLocalization, useClass: NgLocaleLocalization },
                    ]
                }]
        }], function () { return []; }, null);
    CommonModule.ngModuleDef = _angular_core__WEBPACK_IMPORTED_MODULE_0__["傻defineNgModule"]({ type: CommonModule, bootstrap: [], declarations: [NgClass,
            NgComponentOutlet,
            NgForOf,
            NgIf,
            NgTemplateOutlet,
            NgStyle,
            NgSwitch,
            NgSwitchCase,
            NgSwitchDefault,
            NgPlural,
            NgPluralCase,
            AsyncPipe,
            UpperCasePipe,
            LowerCasePipe,
            JsonPipe,
            SlicePipe,
            DecimalPipe,
            PercentPipe,
            TitleCasePipe,
            CurrencyPipe,
            DatePipe,
            I18nPluralPipe,
            I18nSelectPipe,
            KeyValuePipe], imports: [], exports: [NgClass,
            NgComponentOutlet,
            NgForOf,
            NgIf,
            NgTemplateOutlet,
            NgStyle,
            NgSwitch,
            NgSwitchCase,
            NgSwitchDefault,
            NgPlural,
            NgPluralCase,
            AsyncPipe,
            UpperCasePipe,
            LowerCasePipe,
            JsonPipe,
            SlicePipe,
            DecimalPipe,
            PercentPipe,
            TitleCasePipe,
            CurrencyPipe,
            DatePipe,
            I18nPluralPipe,
            I18nSelectPipe,
            KeyValuePipe] });
    CommonModule.ngInjectorDef = _angular_core__WEBPACK_IMPORTED_MODULE_0__["defineInjector"]({ factory: function CommonModule_Factory(t) { return new (t || CommonModule)(); }, providers: [
            { provide: NgLocalization, useClass: NgLocaleLocalization },
        ], imports: [[COMMON_DIRECTIVES, COMMON_PIPES]] });
    return CommonModule;
}());

馃敩 Minimal Reproduction

Use ivy in compatibility mode.

In main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowser().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In app.module.ts, add BrowserModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

馃實 Your Environment

Angular Version: 7.2.0

Anything else relevant?
Been tried with #27848 and angular/angular-cli#13382

@ngbot ngbot bot added this to the needsTriage milestone Jan 11, 2019

@filipesilva

This comment has been minimized.

Copy link
Member

filipesilva commented Jan 22, 2019

Chatted with @alxhub about this, it's on the teams radar and part of the Ivy design.

Right now this option is always true:

/**
* Whether to emit the selector scope values (declarations, imports, exports) inline into the
* module definition, or to generate additional statements which patch them on. Inline emission
* does not allow components to be tree-shaken, but is useful for JIT mode.
*/
emitInline: boolean;

This option causes the imports to be inlined, and while inlined they are not tree-shakeable. Later on there will be a way for this option to be false and patch the selectors in later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment