Metro: Tree shaking while bundling

Created on 23 Aug 2018  Â·  12Comments  Â·  Source: facebook/metro

Is it possible anyhow to implement tree shaking during bundling.

Suppose I have a file say greetings.js:

export const sayHi = (name) => {return `Jarvis says hi to ${name}`};
export const sayBye = (name) => {return `Jarvis says bye to ${name}`};

Now if in my project I am only using sayHi then I want sayBye to be removed from the final bundle which is currently not the case.
Is it possible anyhow to implement this (even if I had to do changes in the config file for the metro bundler).

Most helpful comment

Its february 2020, brexit happened but not this.

All 12 comments

Metro currently does not support tree shaking based on module import/export. @mjesun is currently adding first-class support for Metro to understand them and this will eventually allow us to do tree shaking.

Stayed tuned! 😃

any outcome on tree-shaking ? Looking forward to that.

@rafeca Now that we have experimental support for import/export inside metro, is tree shaking now available out of the box or is there work going on to support it? Anything that we can help with to make this possible?

@karanjthakkar : we're planning to implement some sort of tree shaking (or better said, minification of code based on the es6 module information) during H1 2019.

Based on our internal tests, the most impactful minification in terms of bundle size that can be done is to minify the import/export names, so for example:

// bar.js
export const ANY_VARIABLE_NAME = 'value';
// foo.js
import {ANY_VARIABLE_NAME} from './bar';
console.log(ANY_VARIABLE_NAME);

would get minified to:

// bar.js
exports.a = 'value';
// foo.js
console.log(r('./bar').a);

Afterwards, we're going to be able to do dead code elimination based on the exported values that are not being used anywhere

Any movement or resolution on this?

Is this still slated for H1 2019?

Is it supported yet?

Hi ! Any news ?

Seems that's rather late

Its february 2020, brexit happened but not this.

@rafeca and @mjesun have since left Facebook. We are not actively working on tree shaking at Facebook and are exploring other more promising ways to keep our app size small.

If you are using Metro for React Native, it is unlikely that tree shaking will have a major impact on your applications size or behavior. If you are looking for size improvements, consider compressing the JS bundle that you ship with your app. If you are looking for performance improvements, there are likely many other things (like shipping Hermes and bytecode) that will have a large impact.

I'll close this as wontfix now but we will accept contributions towards tree shaking – and I'm accepting your job applications if you wanna work on this kinda stuff at Facebook London :)

Was this page helpful?
0 / 5 - 0 ratings