Skip to content
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 opened this issue Jun 1, 2018 · 3 comments
Open
Assignees
Labels

Comments

@RoyiNamir
Copy link

RoyiNamir commented Jun 1, 2018

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 RoyiNamir changed the title webpackjson is not configured correctly for rxjs 6 Webpackjson is not configured correctly for rxjs 6 - breaking AOT Jun 1, 2018
@RoyiNamir RoyiNamir changed the title Webpackjson is not configured correctly for rxjs 6 - breaking AOT Huge bundle size - Webpackjson is not configured correctly for rxjs 6 . Jun 2, 2018
@sis0k0
Copy link
Contributor

sis0k0 commented Jul 4, 2018

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 sis0k0 self-assigned this Jul 4, 2018
@RoyiNamir
Copy link
Author

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

@larssn
Copy link

larssn commented Sep 27, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants