How to have @angular/core as small as 75kB in the bundle?

Please provide us with the following information:

OS?

Windows 10.

Versions.

angular-cli: local (v1.0.0-beta.26, branch: beta26) node: 6.5.0 os: win32 x64 @angular/common: 2.4.4 @angular/compiler: 2.4.4 @angular/core: 2.4.4 @angular/forms: 2.4.4 @angular/http: 2.4.4 @angular/platform-browser: 2.4.4 @angular/platform-browser-dynamic: 2.4.4 @angular/router: 3.4.4 @angular/compiler-cli: 2.4.4

Repro steps.

A) for angular-cli generated app: A.1) ng new some-app A.2) cd some-app && ng build --prod --aot --sm (the sourcemap is for later steps) A.3) npm i source-map-explorer -g A.4) cd dist && source-map-explorer vendor.[hash].bundle.js

B) for toh: B.1) git clone https://github.com/johnpapa/angular2-tour-of-heroes.git toh B.2) cd toh (add the missing bit as following) B.3) edit tsconfig-aot.json, insert "lib": [ "es2015", "dom" ], after "target": "es5", B.4) edit package.json, insert "aot-gzip": "npm run aot && npm run rollup && gulp copy-aot-gzip" after "start-aot": ... B.5) npm run aot-gzip B.6) cd dist && source-map-explorer build.js

The log given by the failure.

No error.

Mention any other details that might be useful.

After repro A), I have this breakdown, with @angular/core size at 135kB. After repro B), the breakdown and @angular/core size at 72.3kB.

repro B is a full toh app while repor A is only hello-world, we may expect a larger @angular/core from repro B, but the result is the opposite. Obviously, repro B uses rollup. I’m not sure if that’s the main reason for the size difference. I searched for ways to combine the benefits of webpack and rollup and found ‘https://github.com/egoist/rollup-loader’. But I have no idea how to inject this into angular-cli. Is it possible to do something like loader: 'rollup-loader!webpackLoader'? Thanks.

---

Thanks! We’ll be in touch soon.

[filipesilva]

I think part of it is the webpack helpers, but also https://github.com/webpack/webpack/issues/2899.

I haven’t looked into the rollup-loader yet but it was on my list. Let me see what can be done.

[angular-automatic-lock-bot[bot]]

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.}