When modules were eagerly loaded (framework 2), I only had to load rxjs operators like take or do one time, and could do it more or less anywhere, and it would be available to all modules. Now it looks as though each time I want to use take, I need to import it into the module where I want to use i…

[image] AaronSterling: do I have duplicate take code for each page where I import take? EDIT: I was wrong, see below. No. Angular internals like RxJS get magically promoted into the CommonsChunk, so they stay in the root main.js.

I need to import operators into each page where I use them. Doing it with from right now. Is that expected behavior? You’re saying I need to mention it every time, but each mention relates to the same code section in CommonsChunk?

[image] AaronSterling: You’re saying I need to mention it every time, but each mention relates to the same code section in CommonsChunk? Well, I was saying that, but turns out I was wrong. They do in fact get duped: import { Component } from '@angular/core'; import {IonicPage, NavController}…

Well ok. I only use BehaviorSubject on one page, but I use Observable on most pages. So my current plan is that I will try to load Observable and most operators once, globally; and load what I rarely use with the pages that need them.

[image] AaronSterling: I will try to load Observable and most operators once, globally I’m a bit mystified that that even compiles, but it seems to work. Importing skip and interval in app.component.ts brings them into the commons chunk and both lazily loaded pages still seem to be able to ac…

Currently, it looks as though I can import operators globally in app.component.ts, but I need to import Observable and Subscription in each page.

I don’t think that will cost you, though. In my scratchpad project, both Observable and Subscription are in main.js.

Ya. Exactly my problem. I am lazy loading 5 pages which wont be used frequently by the user. But each page has to import a module which imports raxjs. Now my bundle size is going up because of rxjs duplication. btw can you please post your bundle (main.js) with webpack visualizer ? I would like to s…

[image] rajeevriitm: can you please post your bundle (main.js) with webpack visualizer ? I don’t have that scratch project in that state any more, sorry.

Hi @AaronSterling I’m just in the process of trying to optimise my app startup time and performance and just came across this thread. I currently import the rxjs operators in every component/service that uses them. From what you said it’s better to import these in one place globally (app.componen…

Importing rxjs operators: Best practices when lazy loading

Ionic Framework ionic-v3

AaronSterling November 17, 2017, 11:57am 12

I don’t know. The only data point I’m aware of is here. If you experiment, I’d like to know what you find out.

1 Like

Topic		Replies	Views
Lazy loading in ionic 3 ionic-v3	2	1517	July 19, 2021
Doubt about lazy loaded components ionic-v3	22	3104	July 19, 2021
(Currently) best practice for lazy-loading and module per component? ionic-v3	19	7760	October 11, 2017
Clarification on Ionic /components folder ionic-v3	67	11136	July 23, 2017
[SOLVED] How to better catch/do/empty with RXJS 5.5.2 Updates ionic-v3	7	8335	July 19, 2021

Importing rxjs operators: Best practices when lazy loading

Related topics