14

I just created a new Angular 4 project with the CLI: ng new test

The versions: 

@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

However, tree-shaking is not working correctly, as my unused class FooBar is still in the main.*.js file.

My sample component TS file (FooBar should not be in the output): 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

export class FooBar {
  foo = "hello";
}

I tried to use rollup (like described in the docs) but this didn't work as well...

Is there a simple way to enable tree-shaking? (I expected it to be enabled by default when creating a project via CLI).

Update: I'm using ng build --prod and it's still not shaked..

Rico Suter
  • 11,548
  • 6
  • 67
  • 93
  • What `ng` commands are you using? – R. Richards Apr 04 '17 at 11:15
  • I'm using `ng build --prod` and it's still not shaked.. – Rico Suter Apr 04 '17 at 11:57
  • Does the CLI even use tree shaking? From the angular.io docs on tree shaking in the cookbook, it uses rollup for the tree shaking. But looking at the source the the CLI, there are no rollup dependencies in the package.json. Unless they use something else for tree shaking. I was trying to figure this same thing out. – Paul Samsotha Apr 04 '17 at 12:32
  • As R. Richards says in his Update go to the Angular.Io page for AoT compiling and Tree Shaking [Here](https://angular.io/guide/aot-compiler). The angular documentation is very well written so you shouldn't have any issues. This is what I used when I recently implemented AoT and Tree Shaking into a project in Angular 4. – Daniel Turcich Jun 29 '17 at 16:45
  • if you bulid the project with `ng-cli` , it supported by default. – Rach Chen Nov 03 '17 at 09:33

3 Answers3

6

Update: From the angular-cli Wiki:

All builds make use of bundling and limited tree-shaking, while --prod builds also run limited dead code elimination via UglifyJS.

See below, too.

The Ahead-of-Time (AOT) Compiler

An --prod build defaults to --aot=true now; it has for a while.

There aren't any docs that I have found on the angular.io site that offers a great amount of detail on the exact process of tree-shaking. The Angular CLI has been using webpack for some time now, and there is some information on how that tool does tree-shaking here. UglifyJS seems to be a common theme.

As long as you follow the guidelines in the link above about AOT, you should have good results. If you have difficulty doing an AOT compilation with 3rd party libraries, there is always the risk that the library wasn't written to support AOT. Although, AOT compatibility is expected nowadays.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
  • @R.Richards that link doesn't have any info about shaking. Can you post the gist of it in your answer? – adamdport Dec 20 '17 at 20:23
  • @adamdport Answer updated with some additional links and information. Nothing to gist, I don't think. Just follow the guidelines. I hope this helps you out. – R. Richards Dec 20 '17 at 22:02
  • @R.Richards, how do you make sure that tree-shaking works? – Jun Mar 29 '18 at 18:28
  • @Jun I don't know of a sure-fire way to know that tree-shaking works. I put a fair amount of faith in the tools. I sometimes compare the outputted file sizes between dev and prod builds. If the prod files are smaller, I assume the dead code is shaked out. I have not looked for a way to test that the process does what one would expect. – R. Richards Mar 29 '18 at 18:39
5

For tree shaking use ng build --prod --build-optimizer. This way vendor.js and main.js are combined in main.js file. To avoid that you have to add --vendor-chunk=true

ochs.tobi
  • 3,214
  • 7
  • 31
  • 52
0

Try to do ng build --prod --aot

mezhik91
  • 312
  • 1
  • 2
  • 10