Something that comes up all the time during app development is the overall app size for the application. Well simple logic, the more you add the larger the app will be. Typically you want your app to remain light weight. In this post I just want to cover plugins and how they will affect your final app size.
I’m assuming you have some familiarity with NativeScript. If not, I encourage you to check it out for mobile app development. It’s in the same boat as React Native and Xamarin, not the same as Cordova based frameworks like PhoneGap or Ionic. At any rate, the NativeScript site can provide much better information about what it is and how it works than I can and it’s outside the scope of this post. So lets dig into a couple plugins and see how they will impact our app size.
We will look at two plugins for NativeScript, one that I built and maintain and another from Nathanael Anderson.
- https://github.com/bradmartin/nativescript-color-picker – Brad’s
- https://github.com/NathanaelA/nativescript-dom – Nathanael’s
Plugin with Native Dependencies
Well there are a few ways to find out but I’m going to show a quick and simple route for both. Lets start with the plugin that is adding native android/iOS dependencies to our application first (color-picker plugin). If you look at the plugin source and find the library listed in the
include.gradle located in the platforms/android/ folder here. You’ll find the dependency listed on line 11. You can copy the dependency `com.pavelsikun:vintage-chroma:1.2` and paste it into MethodsCount website and it will give you the stats on the library. Which should give you the following on your screen and tell you approximately how much ‘weight’ will be added to your Android application if you add this plugin (which consumes this native library).
Now for the iOS side, which is even easier if the library is coming from CocoaPods. This NativeScript plugin uses a library from CocoaPods and you’ll find that listed in the PodFile here. If you go to the CocoaPods site and search for that library you’ll find it and the information you’re looking for. Here is the page for this library. On the right side bar toward the bottom you’ll find the size of the library. Below is a screenshot.
Reducing the Size
There are several ways to reduce the overall footprint of the plugins. You can manually delete files from the node_modules folders that you don’t need. Webpack is another option. If you want a simple hook to delete modules from the build there is a hook plugin for NativeScript from Markosko here.
Keep in mind there are other ways, you could open your file explorer and find the node_modules folder of your app and see how large the folder is for the plugin, this works only for the plugin itself. If the plugin is adding native libraries compiled into your app, this won’t work the same. You can use Android Studio to find out however, but I’m not going over that here.
Swift Runtime Size
I’ve been told by Nathanael Anderson that if the Pod for iOS uses Swift, it will add 6+ MBs for the Swift runtimes.
This should show you one approach to determine the weight that a plugin could potentially add to your NativeScript application. There are other options to determine the size and several options to reduce the application size. Before going to production you should strongly consider reducing the application size.