The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

A major focus at Ionic right now is reducing the final bundle size of an Ionic app. One of the major file size offenders has been Ionic Native, which bundles a decent amount of plugin code into your app regardless of whether or not you’re using those plugins.

Ionic Native 3.x fixes this by moving each plugin into its own npm module. Just need the Camera plugin? Install the @ionic-native/camera package and then import { Camera } from '@ionic-native/camera' instead of from the legacy ionic-native package.

In our tests, this helped shave 15% of the final bundle size, which will help apps load more quickly.

Test it

To try out this new alpha version, remove ionic-native from your package.json dependencies, and instead add the plugins you need:

  "dependencies": {
    "@angular/common": "2.2.1",
    ...
    "@ionic-native/camera": "3.0.0-alpha.1",
    "@ionic-native/statusbar": "3.0.0-alpha.1",
    "@ionic-native/splashscreen": "3.0.0-alpha.1",
    ...
  },

Change your imports from ionic-native to match the new package format:

import { StatusBar } from '@ionic-native/statusbar';
import { Splashscreen } from '@ionic-native/splashscreen';

Thoughts?

Please let us know how this works for you in the comments below or by filing an issue on the repo.

This is one of many filesize and boot time optimizations in the pipeline for Ionic, so stay tuned!

  • Young Park

    What about fonts? Seems with the mobile app, we won’t need ttf (big), woff and woff2 together. (but woff2 doesn’t work in safari mobile). Would it be good to use only woff to reduce the package size?

    I’m actually curious whether how we can use the system fonts in the cordova app. Seems if I change fonts to something else in my samsung android phone, all fonts automatically changes if the app is a native app. But seems webview based apps are not changed.

    • https://Savelist.co Rodrigo Fernández

      This is specially interesting if you use a custom font for all platforms (we use Lato), because removing all Roboto and Noto files would save 1MB in the final IPA/APK. Maybe it’s possible to avoid copying these files with a custom app-script?

    • http://ionicframework.com/ Adam Bradley

      Yes you’re right, not all fonts need to be copied one-for-one. That’s another good one we’ll take a look at, thanks.

  • http://www.wilsonhobbs.com wilson108

    So happy to know that performance and speed and bundle size are Ionic’s highest priorities. Keep rocking!

  • Pie Cy

    performance increase is better than anything else…thanks ionic team

  • forextor

    Smaller is better!… good to know Ionic is working on this… I might try this later if there is a need to update my app.

  • João Paulo Costa Marra

    Awesome!

  • Josep Sayol

    Hey Max, I just updated my app to the new @ionic-native packages and everything seems to be working just fine.

    In my case I saw a reduction of the bundle size (main.js) of almost 7%, with a total of 154KB saved. That’s great considering how simple the change was. FYI I’m using these plugins: Camera, File, StatusBar, Splashscreen.

    Thanks!

    • Josep Sayol

      Oh, and Keyboard! Forgot about that one.

  • Thomas Opiolka

    Worked without issues for me using the packages (splashscreen, statusbar, network, securestorage)

    Thanks for the performance boost.

  • Davo

    Really cool. I tested successfully following dependencies on real iPhone 6 (iOS 10) and Nexus 5X (Android 6):

    “@ionic-native/camera”: “3.0.0-alpha.1”,
    “@ionic-native/keyboard”: “3.0.0-alpha.1”,
    “@ionic-native/statusbar”: “3.0.0-alpha.1”,
    “@ionic-native/splashscreen”: “3.0.0-alpha.1”,
    “@ionic-native/deeplinks”: “3.0.0-alpha.1”,
    “@ionic-native/inappbrowser”: “3.0.0-alpha.1”,
    “@ionic-native/facebook”: “3.0.0-alpha.1”,
    “@ionic-native/file”: “3.0.0-alpha.1”,
    “@ionic-native/googleanalytics”: “3.0.0-alpha.1”,
    “@ionic-native/push”: “3.0.0-alpha.1”,

    The size of my iOS app bundle size (main.js) was reduced by a 4% factor (4.6Mb instead of 4.8Mb).

    It works well. I’m even enough confident to include that in the new version I’m about to submit to the stores.

    P.S.: Deep linking was only tested on Android. Otherwise, each were tested on both devices

    • yesimahuman

      Is that a production bundle or a development bundle?

      • Davo

        production (–prod)

        • yesimahuman

          Can you email me? I want to take a look and get this bundle size down for you, it’s a lot larger than we see for production: max@ionic.io

          • Davo

            Sure, thx. Just did.

  • Andrew Forrest

    Does this replace “ionic plugin add”—because that would be wonderful if so! The dual ‘node_modules’/‘plugins’ systems is confusing and error-prone. If I can add a native plugin with ‘npm install –save’ that simplifies things immensely.

  • Kazi

    Some of the plugins are not installing. For example below two give errors when I run npm install
    npm ERR! 404 Not found : @ionic-native/callnumber
    npm ERR! 404 Not found : @ionic-native/transfer

    • developer Android

      @ionic-native/call-number

  • http://www.codingandclimbing.co.uk Dave

    Getting loads of WARNings saying ionic-native/core, camera etc requires a peer of rxjs@^5.0.1 but none was installed.

    Stuck!

    • yesimahuman

      It’s just a warning and shouldn’t impact anything

  • Meyer Stone

    Some of the plugins are not installing.
    “@ionic-native/launch-navigator”: “3.0.0-alpha.1”,
    “@ionic-native/launch-navigator-options”: “3.0.0-alpha.1”,
    “@ionic-native/geolocation”: “3.0.0-alpha.1”,
    “@ionic-native/geolocation-options”: “3.0.0-alpha.1”,
    “@ionic-native/native-storage”: “3.1.0-alpha.1”,

  • Rick

    Hi @yesimahuman:disqus ,

    Production build, no code change only Ionic Native 3.x:

    APK 6.99 MB -> 5.72 MB a decrease of 18.17%.
    IPA 7.02 MB -> 5.36 MB a decrease of 23.65%

    Awesome! The app is really loaded much faster.

    Dependencies:
    “@ionic-native/statusbar”: “3.0.0-alpha.1”,
    “@ionic-native/splashscreen”: “3.0.0-alpha.1”,
    “@ionic-native/themeable-browser”: “3.0.0-alpha.1”,
    “@ionic-native/localnotifications”: “3.0.0-alpha.1”,
    “@ionic-native/toast”: “3.0.0-alpha.1”,
    “@ionic-native/devicemotion”: “3.0.0-alpha.1”,
    “@ionic-native/nativestorage”: “3.0.0-alpha.1”