Huge bundle size - Webpackjson is not configured correctly for rxjs 6 . #550
Description
Empty new project :
tns create aaa --ng
( & webpack & bundle analyzer_)
I was told by Ben Lesh that in Rxjs6 , we shouldn't do :
import { Observable } from 'rxjs/Observable';
But
import { Observable } from 'rxjs';
Same goes for operators :
import {first, skipWhile} from "rxjs/operators";
Ok. So at the new project I've added this to app.component.ts
:
import { Component } from "@angular/core";
import { timer } from 'rxjs'; <--------
@Component({
selector: "ns-app",
templateUrl: "app.component.html",
})
export class AppComponent {
constructor(){
const source = timer(1000); <--------
source.subscribe(val => console.log(val));
}
}
Let's run tns run android --bundle --env.uglify --env.report --env.aot
.
(Please notice uglify)
Let's inspect the bundle with this site
But look how many operators are in the bundle : - without any explicit reason
* Operator exports */
/** PURE_IMPORTS_START PURE_IMPORTS_END */
export { audit } from '../internal/operators/audit';
export { auditTime } from '../internal/operators/auditTime';
export { buffer } from '../internal/operators/buffer';
export { bufferCount } from '../internal/operators/bufferCount';
...
...
Why is it loading the full Rxjs lib even with --uglify
? I know that uglify is not 1:1 tree shaking , but still - it's loading the entire rxjs library.
Also - I was told in the comments :
You need to have path maps configure for your bundler. Otherwise it'll import basically everything like you're mentioning. See https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking
Currently - that path maps section ( if it's going to help in any manner) is missing from nativescript supplied webpackjson file.
The final result is that users get the full Rxjs6 library making the bundle size gets a lot bigger.
- Blank project which shows the problem : https://ufile.io/6mdhi
- A helpful discussion between myself and Martin about this topic