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.

Add module support for tree shaking

See original GitHub issue

Add support for the "module" field in package.json so that webpack/rollup can do proper tree shaking. If you use @vx currently with Rollup, you will get an error by default due to the only availability being commonjs that it cannot understand, so you have to add all the exports of each sub-library of @vx explicitly in rollup.config.js:

https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports

The result is that if you import one part of a @vx/shape, for example, you have to import its entirety.

I believe this can be as simple as building each library twice: Once as it currently is (default es5 transpiling by babel), and a second build into another folder, such as module, where the modules flag is turned off for babel in the babelrc:

"presets": [["es2015", { "modules": false }], "react", "stage-0"],

https://babeljs.io/docs/plugins/preset-es2015/#options

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
hshoffcommented, Feb 22, 2018

That’s my fault. Will get that fixed. Thanks @knoopx

1reaction
ljharbcommented, Dec 22, 2017

@techniq i believe it’s now sideEffects: false.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree-Shaking: A Reference Guide - Smashing Magazine
Tree -shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and ...
Read more >
Tree Shaking - webpack
ModuleConcatenationPlugin is needed for the tree shaking to work. It is added by mode: 'production' . If you are not using it, remember...
Read more >
How To Make Tree Shakeable Libraries - Theodo blog
Tree shaking is a way to achieve dead code elimination by detecting which ... Create an application module tree by looping through all...
Read more >
Building a Tree Shaking Friendly JavaScript Package
Tree shaking is a dead-code (unused code) elimination process. It relies on the static structure of ES modules (import and export).
Read more >
Tree shaking and code splitting in webpack - LogRocket Blog
Here, we'll explain tree shaking and code splitting in webpack and discuss how to combine them for the most optimal bundle possible.
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