9

Consider having a scenario, where we build our react-native App with release mode while having code like below:

let img;
if ( __DEV__ ) {
  img = require('./debug-image.png');
} else {
  img = require('./real-image.png');
}

My question is, will both debug-image.png and real-image.png get bundled into the APK (even though the debug-image.png is never used anywhere else), or does the bundler detect that the debug-image.png file is not used (and does NOT include it into the bundle)?

Top-Master
  • 7,611
  • 5
  • 39
  • 71

1 Answers1

7

Manual Testing:

We can simply test it out ourselves, by building an unsigned-release APK (as mentioned in another post), two times, once with codes like below (the First-Case):

let bigFile;
if (__DEV__) {
  bigFile = require('./big-file.dat');
} else {
  bigFile = require('./small-file.dat');
}

Which in, adding ! to above if-statement, like if ( ! __DEV__) { ..., caused the APK-size to increase by 50 MB (i.e. the size of ./big-file.dat).

And another time, tested with codes like below (the Second-Case):

let bigFile = require('./big-file.dat');
if ( ! __DEV__) {
  bigFile = null;
}

Where no matter what I did, the APK-size did just keep huge.

Conclusion:

According to the APK-size change, I am sure and can tell that (in the time of writing, namely 2019):

  • The bundler is intelligent enough to handle the First-Case and excludes from the bundle, the file which is only used inside of the inactive if-statement.
  • But on the other hand, it could not optimize out the file, which was used in a little more complex Second-Case (seems it simply does not keep track of the variable).

Considering that the bundler is intelligent enough, and can in some cases even exclude files from the bundle, under other means that we can safely use the constant __DEV__ (which react-native framework provides us).

Note: I am using react-native with the type-script template, like "react-native init MyApp --template typescript", but I hope this is even true for the bundler which is used in none-typescript template as well !!

Top-Master
  • 7,611
  • 5
  • 39
  • 71