How to decrease app size and release it using webpack and NativeScript


Here it’s what I did to put webpack and NativeScript work together.

I’m just registering my considerations about webpack in order to help others. Thanks to @triniwiz, @markoso, @dicksmith and others I could decrease my final app and release it.

Obs.: to run the following commands you must be in your app root folder.

Phase One: preparing your environment

Step Number One: Clean up
First of all, you must remove some folders using this command:

rm -rf platforms/ && rm -rf hooks && rm -rf node_modules

It’ll clean up every possible cache remained from previous compilation process. It’s important to clean these folders every time you want to recompile to make sure you are using the latest version of your source code, configuration, etc… You can do it anytime you need to.

Step Number Two: Install webpack

Now that you already have your project folder cleaned up you must install webpack plugin with this command:

npm install webpack

It’ll install it’s plugin and create some additional files in your root app folder. Don’t worry about them, just keep them there.

Step Number Three (redoubled attention): Configure your dependencies

This is the most important step, here you’ll configure your package.json. First of all, the project has two package.json files, just ignore the /root_app_folder/app/pagacke.json file, because you’ll work with /root_app_folder/package.json.

At this phase you must pay attention to your environment and dependencies between packages and plugins. You must have the following setup:

  1. NativeScript: 2.5.0 or later (at this moment I’m using 2.5.0)

  2. Node JS: v6.9.5

  3. Dependencies

@angular/* modules”: 2.4.3
"@angular/router": "3.4.3"
“rxjs”: “~5.0.1”

  1. Dev Dependencies

“typescript”: "~2.1.0"
“webpack”: "2.2.0"
“webpack-sources”: "~0.1.3"
“zone.js”: “^0.7.2”

Finally, here it’s my package.json file to guide you if you still have some questions / doubts:

  "description": "yourappname - some description",
  "license": "",
  "readme": "",
  "repository": "",
  "nativescript": {
    "id": "",
    "tns-ios": {
      "version": "2.5.0"
    "tns-android": {
      "version": "2.5.0"
  "dependencies": {
    "@angular/common": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/router": "3.4.3",
    "nativescript-angular": "^1.4.1",
    "nativescript-geolocation": "0.0.17",
    "nativescript-google-maps-sdk": "^1.4.2",
    "nativescript-hook-filter-modules": "^1.0.5",
    "nativescript-sqlite": "^1.1.2",
    "nativescript-telerik-ui": "^1.5.1",
    "nativescript-theme-core": "^0.2.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.0.1",
    "tns-core-modules": "^2.5.0"
  "devDependencies": {
    "@angular/compiler": "2.4.3",
    "@angular/compiler-cli": "2.4.3",
    "@ngtools/webpack": "1.2.4",
    "babel-traverse": "6.21.0",
    "babel-types": "6.21.0",
    "babylon": "6.14.1",
    "copy-webpack-plugin": "~3.0.1",
    "extract-text-webpack-plugin": "~2.0.0-beta.4",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "^0.3.2",
    "nativescript-dev-webpack": "^0.3.5",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~1.6.0",
    "typescript": "~2.1.0",
    "webpack": "2.2.0",
    "webpack-sources": "~0.1.3",
    "zone.js": "^0.7.2"
  "scripts": {
    "rebuild": "rm -rf platforms/ && rm -rf hooks && rm -rf node_modules && npm i",
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"

Obs.: If you’re using "nativescript-sqlite": "^1.1.2" you have to edit the entry from "main": "sqlite.js" to "main": "sqlite.js" in it’s /app_root_folder/node_modules/nativescript-sqlite/package.json file in order to work with webpack.

Step Number Four: Install other dependencies

Finally, run: npm i to install all other packages and than became ready to build your app.

Phase Two: releasing for Android and iOS

Now that you have your environment well configured you can release your application for Android and iOS.

For Android

  1. First you need a .keystore file with your certificate in there. I recommend you to be careful when set the password… Don’t use special characters like $, I had some problems to access my .keystore file through webpack release command. At the end of story I had to change my password and I set a new one without special characters.

  2. With your .keystore ok, now you are able to release your app and generate your .APK file to publish. Use the command:

npm run build-android-bundle -- --release --key-store-path /Users/YourUser/Documents/PathToYourKeystore/yourkeystorefile.keystore --key-store-password 'yourpassowrd' --key-store-alias 'certificate-alias' --key-store-alias-password 'yourpassword' --copy-to /Users/YourUser/Documents/root_app_folder/yourappname_1-0-1.apk

For iOS

  1. First you have to generate your Provisioning Profile for Distribution

  2. Download it and install on your Mac / Xcode

  3. Before execute the build command, set your app’s target to “General Devices” in Xcode

  4. Log in into your iTunes Connect account and create your app version that you’ll send soon

  5. Run this command to generate .IPA file for release:
    Obs.: of course the following values 234YOP788Z and 21909b4a-761c-1098-13g9-341n2670f5f3 are fake and you must pass your own teamId and provision profile data as parameter. Execute:
    npm run build-ios-bundle -- --release --for-device --copy-to /Users/YourUser/Documents/root_app_folder/yourappname_1-0-1.ipa --teamId 234YOP788Z --provision 21909b4a-761c-1098-13g9-341n2670f5f3

  6. After this, you can use Application Loader to upload your .IPA file and wait for an answer from Apple.

  7. Pay attention to your inbox because Apple will send you an email with your status. Sometimes seems they didn’t receive your package but they did. It can take some hours to your build be available on iTunes Connect. Be patient…

Obs.: about decrease the final file size, look for big image files and other resource files (i.e. Fonts) that could be smaller than they are or even deleted. I did a hard work investigation around this and I could save about 30 MB on iOS version :wink:

My results:
Android from 89 MB to 36 MB (after installed)
iOS from 141 MB to 53 MB (after installed)

That’s how I used webpack and NativeScript together to build, decrease the final size and release my app for Android and iOS.

Hope it can help you.

[Brainstorm][ns+ng] App launch performances
Update Increased the size of apk by 82%

This is great documentation. @toddanglin it may help us…


Really nice! Makes me want to try webpack again. :slight_smile:

I’m assuming that the instructions still hold for anyone not using Angular? Just omit the the Angluar dependencies in the package.json and everything else is the same?

My only lingering FUD is “plugin compatibility.” What does a plugin need to do to be “webpack friendly”? Or put another way, what are common problems with plugins that break webpack? Based on this tip, it seems even whitespace in the package.json could cause problems.


@toddanglin Thank you for your time.

I just used it with Angular. I have no idea about it’s results without Angular.

About compatibility with other plugins I’m not sure about all of them, but I had problems with nativescript-sqlite as described above as well as it’s solution.

My intention here is share with people a way to decrease a final app size, because it’s default size (without using webpack) is unbelievable big.



Most of the time the only thing you will need to do with the plugin is remove the .js from your plugin’s package.json e.g "main":"index.js" => "main":"index"


Interesting (and good to know).

@roblauer @NathanaelA Is the NativeScript Plugin site able to do any kind of automatic “validation” to check plugins for these common “compatibility issues” with WebPack? Would be great if we could both A) encourage plugins to conform to the patterns that work with WebPack, and B) easily highlight plugins that could have potential compatibility problems.


I think most plugins are built using one of the seeds available and recently i noticed @wwwalkerrun updated his but what you are suggesting would be great

Nativescript Angular Webpack

@toddanglin - I can easily detect this; but I honestly have no idea if PNO ( ever will show this – you will have to talk to @roblauer as the direction of PNO has changed recently.

My own PNR ( might get this check in its next upgrade as PNR is the only site that is currently getting any maintenance and changes to it by me and/or the community.

Nathanael A.


what about in nativescript+js


@shibi NativeScript + JS, NativeScript + Angular, NativeScript + TS are all different ‘flavors’ of the same thing - every single NativeScript project has a platforms and a node_modules directories. the hooks are optional, depending whether any plugin installs these or not.


could you please explain how to reduce the ns+js android apk size without avoiding multiple apk feature ie, by avoiding unwanted files etc from node-modules etc.


during run time the node_modules are recreated.
like reactnative(frame work) is it possible to include only needed folders in node_modules


That is what actually webpack does, merge all required modules / files into 2 files, bundle and vendor.

Using uglify option will additionally minify the code. You can try compressing images you use in the project, avoid too much custom fonts. All these may help a bit.

But obviously multiple APKs will have significant results on APK size. If I’m not wrong, it can bring down the hello world app size to around 6mb.


thank you for your reply, I tried everything but not multiple apk, I tried webpack but no benefit only 1mb reduced. what to do??


As @manojdcoder mentioned before me - only the node modules that are actually used in your project will be packaged with your resulting application, so you don’t have to worry about manually pruning the node_modules directory.


so how can i reduce the app size without using multiple apk


tns build –bundle followed by all the ususal parameters reduced my apk siize from 17.5MB to 13.5MB but this started crasing my application. Need funther investigation as why is this crashing.