Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

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

Open
@RoyiNamir

Description

@RoyiNamir

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.


Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions