When building APKs for release in Expo React Native, you may notice that the APK size is quite large by default. This can negatively affect user experience, especially when distributing your app to users on mobile networks or those with limited storage. Fortunately, there are several ways to optimize and reduce the APK size. Here are some effective strategies to help you create a more lightweight APK file.
1. Use Expo's EAS Build Instead of Managed Workflow
Expo's classic expo build:android workflow tends to produce larger APK files because it includes a wide range of dependencies and native libraries by default. Switching to the Expo Application Services (EAS) build process can significantly reduce your APK size. With EAS, you have more control over which libraries are included, allowing you to remove unused libraries or dependencies that would otherwise bloat your APK.
Steps:
- Install EAS CLI: npm install -g eas-cli
- Configure your app with an eas.json file to set up different build profiles.
- Run eas build -p android to start the EAS build.
2. Minimize the Number of Dependencies
Every library you add to your project may introduce new assets, fonts, or native code that increases APK size. It’s a good idea to audit your dependencies and remove any that are not essential. You can also look for lighter alternatives to some libraries, especially if they add unnecessary overhead.
Steps:
- Use npm list or yarn list to view all dependencies.
- Remove unused libraries with npm uninstall <package-name> or yarn remove <package-name>.
3. Enable Hermes for JavaScript Execution
Hermes is a lightweight JavaScript engine optimized for running React Native apps on Android. Enabling Hermes can reduce APK size and improve performance by reducing JavaScript bundle size. Hermes is particularly effective when you have many JavaScript modules or complex code in your app.
Steps to Enable Hermes:
- In android/app/build.gradle, add enableHermes: true in the project.ext.react section.
For Expo managed projects, Hermes is already supported in EAS builds, so make sure it’s enabled in your eas.json config.
4. Compress and Optimize Images
Images are one of the main contributors to large APK sizes. To reduce the APK size, compress and resize images wherever possible. Several tools, such as TinyPNG and ImageMagick, can help optimize images without losing quality.
Steps:
- Use services like TinyPNG to compress images.
- Resize images to the exact size you need them to be used in the app.
- Consider loading images from a remote server to avoid including them in the APK directly.
5. Use Dynamic Imports for Large Modules
Dynamic imports allow you to load modules only when they’re needed, rather than bundling them all into your APK. This can be particularly helpful if you have libraries or features that are not always in use, as you can delay loading them until they’re absolutely necessary.
Example:
// Instead of a standard import import LargeComponent from 'large-library'; // Use dynamic import const LargeComponent = React.lazy(() => import('large-library'));6. Remove Unused Fonts and Assets
Every font and asset in your project adds to the overall size of the APK. Be sure to delete any unused fonts or image assets from the project directory to avoid unnecessarily large APKs.
Steps:
- Check your assets folder for any unused images or fonts.
- Verify your codebase to confirm whether all fonts and images are in use.
- Remove any redundant files from the assets folder.
7. Optimize Vector Assets with SVGs
If you use vector icons, prefer SVG files over PNGs or other formats. SVGs are resolution-independent, so they don’t require multiple versions for different screen densities, helping to reduce the APK size.
With Expo, you can use the expo-vector-icons library, which includes popular icon sets with the ability to optimize the icons included in the final build.
Example:
- When using expo-vector-icons, only import the specific icons needed for your app, instead of importing entire icon packs.
8. Reduce Code Bloat by Using Tree Shaking
Tree shaking is a process of removing unused code. For example, if you use only a few functions from a large utility library, tree shaking can help eliminate unused functions from the APK. Although Expo itself has some limitations for tree shaking, you can minimize this bloat by using a modularized approach to code organization.
Example:
// Instead of importing the entire library import _ from 'lodash'; // Import only what you need import debounce from 'lodash/debounce';9. Exclude Development Dependencies in Production
Using tools such as .babelrc and .env files, you can ensure development dependencies aren’t included in production builds. This includes tools like debugging libraries or analytics tools only intended for development.
Steps:
- Define environment variables in .env for different environments.
- Use babel-plugin-transform-remove-console to remove console.log() statements from production builds.
10. Test and Monitor APK Size Over Time
After making optimizations, monitor the APK size after every release. This helps identify any new dependencies or assets that might contribute to APK size bloat, allowing you to take quick action to reduce unnecessary weight.
Summary
Reducing APK size in an Expo React Native project requires a combination of strategies, including optimizing assets, using dynamic imports, enabling Hermes, and regularly auditing dependencies. By implementing these techniques, you can significantly cut down on your app's APK size, leading to better performance and improved user experience.
Additional Resources
- Expo Documentation
- React Native Optimization Guide
Experiment with these techniques and monitor the APK size with each optimization step, and you’ll achieve a more manageable APK size in your Expo React Native project
You also can use Expo BuildProperties
{
"expo": {
"plugins": [
.../your other plugins,
[
"expo-build-properties",
{
"android": {
"enableProguardInReleaseBuilds": true,
"enableShrinkResourcesInReleaseBuilds": true,
"useLegacyPackaging": true
},
"ios": {
}
}
]
],
}
}