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.

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

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

Closed
rxjs-space opened this issue Jan 23, 2017 · 6 comments
Closed

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

rxjs-space opened this issue Jan 23, 2017 · 6 comments

Comments

@rxjs-space
Copy link

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
Copy link
Contributor

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.

@deebloo
Copy link
Contributor

deebloo commented Jan 23, 2017

@rxjs-space awesome breakdown. thanks for the details

@coryrylan
Copy link
Contributor

I think this issue is related as well

#4015

@elvisbegovic
Copy link
Contributor

Any news here

@filipesilva
Copy link
Contributor

Please see #2901 for more information on this.

@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 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants