-
Notifications
You must be signed in to change notification settings - Fork 12k
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
Comments
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 |
Any news here |
Please see #2901 for more information on this. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
OS?
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.
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.The text was updated successfully, but these errors were encountered: