Skip to content
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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

ClassExpression in ES2015 builds produces larger bundles #14577

Closed
alan-agius4 opened this issue May 30, 2019 · 5 comments · Fixed by #14585
Closed

ClassExpression in ES2015 builds produces larger bundles #14577

alan-agius4 opened this issue May 30, 2019 · 5 comments · Fixed by #14585
Assignees
@alan-agius4
Labels
freq3: high severity3: broken type: bug/fix
Milestone
8.0.x

Comments

@alan-agius4
Copy link
Collaborator

alan-agius4 commented May 30, 2019 •
edited
Loading

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

No, but now it effects more users as differential loading is on by default.

Description

TypeScript ClassExpression are not being treeshaken away.

Example codes:

let AggregateColumnDirective = class AggregateColumnDirective {
    constructor(viewContainerRef) {
    }
};
AggregateColumnDirective = __decorate([
    Directive({
        selector: 'ejs-grid>e-aggregates>e-aggregate>e-columns>e-column',
        inputs: input$1,
        outputs: outputs$1,
        queries: {}
    }),
    __metadata("design:paramtypes", [ViewContainerRef])
], AggregateColumnDirective);
let ChipList = class ChipList extends Component {
  constructor(options, element) {
        super(options, element);
    }
};
__decorate$4([
    Property([])
], ChipList.prototype, "chips", void 0);
ChipList = __decorate$4([
    NotifyPropertyChanges
], ChipList);

🌍 Your Environment


Angular CLI: 8.0.0
Node: 11.0.0
OS: win32 x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

#14263
@alan-agius4 alan-agius4 added this to the 8.0.1 milestone May 30, 2019
@alan-agius4 alan-agius4 mentioned this issue May 30, 2019
Closed
@alan-agius4 alan-agius4 changed the title CallExpressions in ES2015 builds produces larger bundles ClassExpression in ES2015 builds produces larger bundles May 30, 2019
@alan-agius4 alan-agius4 self-assigned this May 30, 2019
This was referenced May 31, 2019
Closed
Merged
@kumaresan-subramani
Copy link

HI @alan-agius4 ,

Any update in this?

alexeagle pushed a commit that referenced this issue Jun 6, 2019
@alan-agius4 @alexeagle
fix(@angular-devkit/build-optimizer): wrap es2015 class expressions f…
f520077 
…or better tree-shaking

ClassExpressions such as the below are not treeshakable unless we wrap them in an IIFE

```js
let AggregateColumnDirective = class AggregateColumnDirective {
	constructor(viewContainerRef) { }
};
AggregateColumnDirective = __decorate([
	Directive({}),
	__metadata("design:paramtypes", [ViewContainerRef])
], AggregateColumnDirective);
```

With this change we wrap the above in an IIFE and mark it as a PURE function.
```js
const AggregateColumnDirective = /*@__PURE__*/ (() => {
	let AggregateColumnDirective = class AggregateColumnDirective {
		constructor(viewContainerRef) { }
	};
	AggregateColumnDirective = __decorate([
		Directive({}),
		__metadata("design:paramtypes", [ViewContainerRef])
	], AggregateColumnDirective);

	return AggregateColumnDirective;
})();
```

With this pattern if the class is unused it will be dropped.

Note: In future we should rename `wrap-enums` to something more generic, and combine class-fold with this transformer especially considering the future fix that needs to be done for #14610

Fixes #14577
alexeagle pushed a commit that referenced this issue Jun 6, 2019
@alan-agius4 @alexeagle
fix(@angular-devkit/build-optimizer): wrap es2015 class expressions f…
b6b74d2 
…or better tree-shaking

ClassExpressions such as the below are not treeshakable unless we wrap them in an IIFE

```js
let AggregateColumnDirective = class AggregateColumnDirective {
	constructor(viewContainerRef) { }
};
AggregateColumnDirective = __decorate([
	Directive({}),
	__metadata("design:paramtypes", [ViewContainerRef])
], AggregateColumnDirective);
```

With this change we wrap the above in an IIFE and mark it as a PURE function.
```js
const AggregateColumnDirective = /*@__PURE__*/ (() => {
	let AggregateColumnDirective = class AggregateColumnDirective {
		constructor(viewContainerRef) { }
	};
	AggregateColumnDirective = __decorate([
		Directive({}),
		__metadata("design:paramtypes", [ViewContainerRef])
	], AggregateColumnDirective);

	return AggregateColumnDirective;
})();
```

With this pattern if the class is unused it will be dropped.

Note: In future we should rename `wrap-enums` to something more generic, and combine class-fold with this transformer especially considering the future fix that needs to be done for #14610

Fixes #14577
@kumaresan-subramani
Copy link

kumaresan-subramani commented Jun 7, 2019 •
edited
Loading

HI @alan-agius4

Which version of the angular-build-optimizer package do I need to update?

@kumaresan-subramani
Copy link

Thanks
issue got fixed.

screenshot
Screenshot (267)

@Splaktar Splaktar mentioned this issue Jun 14, 2019
Closed
@kumaresan-subramani kumaresan-subramani mentioned this issue Jul 5, 2019
Closed
@Saranya13 Saranya13 mentioned this issue Aug 21, 2019
Closed
@kumaresan-subramani
Copy link

kumaresan-subramani commented Aug 21, 2019 •
edited
Loading

#15396

@kumaresan-subramani kumaresan-subramani mentioned this issue Aug 27, 2019
Closed
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
freq3: high severity3: broken type: bug/fix
Projects
None yet
Milestone
8.0.x
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-optimizer): wrap es2015 class expressions for better tree-shaking
2 participants
@alan-agius4 @kumaresan-subramani