angular / angular-cli

CLI tool for Angular

Home Page:https://cli.angular.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

rxjs-space opened this issue · comments

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.

I think part of it is the webpack helpers, but also webpack/webpack#2899.

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

@rxjs-space awesome breakdown. thanks for the details

I think this issue is related as well

#4015

Any news here

Please see #2901 for more information on this.

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.