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)?
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.
According to the APK
-size change, I am sure and can tell that (in the time of writing, namely 2019
):
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 !!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With