nativescript-dev-webpack icon indicating copy to clipboard operation
nativescript-dev-webpack copied to clipboard

Huge bundle size - Webpackjson is not configured correctly for rxjs 6 .

Open RoyiNamir opened this issue 7 years ago • 3 comments

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

image

* 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';
...
...

Full list is here

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.


RoyiNamir avatar Jun 01 '18 10:06 RoyiNamir

Hi @RoyiNamir! We're looking into that issue now. I don't have access to the attached files. Can you upload them somewhere else?

sis0k0 avatar Jul 04 '18 09:07 sis0k0

@sis0k0 Hi :) Done. I've updated the question and the links. Thank you. 👍

RoyiNamir avatar Jul 04 '18 10:07 RoyiNamir

Has anyone done any benchmarks as to how this affects performance?

larssn avatar Sep 27 '18 14:09 larssn