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.

Tree shaking

See original GitHub issue

Using next’s webpack analyzer, I noticed that all of RNW is getting imported into every one of my pages. I still need to investigate this further, but I wonder if dripsy is contributing to RNW’s tree shaking not working properly.

Styled components faces this issue: https://github.com/styled-components/styled-components/pull/2797#issuecomment-574955289

Does RNW’s Babel plugin work on node module imports too? For instance, when we import X from react-native in dripsy, does it pick that up? I’m not familiar with Babel/webpack etc.

For now, I’ll add sideEffects: false to the package.json to see if that does anything.

Issue Analytics

State:
Created 3 years ago
Comments:18 (18 by maintainers)

Top GitHub Comments

2reactions

nandorojocommented, Apr 7, 2021

Sent a PR to react-native-safe-area-context. It reduced my bundle size by 400kb 🤯

https://github.com/th3rdwave/react-native-safe-area-context/pull/189#issuecomment-815274313

2reactions

nandorojocommented, Oct 3, 2020

I’m still getting all of RNW importing on all of my next js pages. Dripsy takes up only 5kb gzipped, but RNW is 100kb, so not ideal. I’ll see if making a page without dripsy has the same effect or not…

Top Results From Across the Web

Tree shaking - MDN Web Docs Glossary

Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. It relies on the import...

Tree Shaking - webpack

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...

Tree shaking - Wikipedia

In computing, tree shaking is a dead code elimination technique that is applied when optimizing code. Often contrasted with traditional single-library dead ...

Tree-Shaking: A Reference Guide - Smashing Magazine

Simply put, tree-shaking means removing unreachable code (also known as dead code) from a bundle. As Webpack version 3's documentation states: “ ...

Reduce JavaScript payloads with tree shaking - web.dev

Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has...