question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Big Bundle size - Tree shaking not working for operators

See original GitHub issue

Bug Report

Current Behavior When creating a minimal project using rxjs the bundle size for that project is very heavy even when using just one or two operators (+600Kb uncompressed)

Reproduction

import { Observable } from 'rxjs/internal/Observable';
import { map } from 'rxjs/operators';
let x = Observable.create();
x.pipe(
  map((v) => v++)
)

Expected behavior I expect the bundle size to be only related to the number of operators I import in this case should be 7.5 Kb and not 577 Kb

Environment

  • Runtime: [e.g. Node v${x}, Chrome v${x}]
  • RxJS version: 6.5.2
  • Webpack 4.32.2

Possible Solution Not sure I thought by the docs that tree shaking should work out of the box for this project. Not sure how to help with this.

Additional context/Screenshots Before importing operators the bundle size is ( ** 36.8 Kb ** ): Screen Shot 2019-05-27 at 11 21 48 PM

After import just map operator the bundle size is ( ** 577 Kb ** ): Screen Shot 2019-05-27 at 11 31 33 PM

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
cartantcommented, May 28, 2019

You should NOT be importing from internal locations. Your screen shots indicate you are importing from rxjs/internal/Observable, etc. Your doing so is not supported.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack Tree Shaking not working when importing from a file ...
If I remove the moment import from module.js tree shaking works fine and i only see square in my bundle. Is this how...
Read more >
Optimize your bundle size by eliminating dead code / tree ...
Today, I want to talk about a very effective method to optimize your bundle size called Tree Shaking. Traditionally, we install a module...
Read more >
Tree Shaking: DevExtreme - JavaScript UI Components for ...
The tree shaking mechanism works only when you create the production bundle. Bundle Size. DevExtreme code consists of three main code groups: -...
Read more >
PCF Controls - Tree-Shaking For Better Bundle Size
In this post I will show how to optimize the tree-shaking process and reduce the bundle size of PCF controls with simple adjustments...
Read more >
Minimize size in webpack | Vue Forums - Syncfusion
Besides this problem, we don't really understand how to use the tree shaking in our project. Is there any other information we could...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found