Cleaning unnecessary files in www/lib

ionic-v1
1

After releasing our first ionic app, we were surprised with the size of the final APK / IPA. After some research we found that the www/lib folder was eating 12 MB. It seems that by default, ionic / cordova will copy the whole www/lib to the final APK.

The problem is that in the www/lib there are a lot of unnecessary files, and there is no “best practice” for solving this prbolem.

For instance, Ionic always comes with:

├── ionic-angular.js
├── ionic-angular.min.js
├── ionic.bundle.js
├── ionic.bundle.min.js
├── ionic.js
└── ionic.min.js

But actually, only the ionic.bundle.js will be referenced in the index.html:

<script src="lib/ionic/js/ionic.bundle.js"></script>

If we take a look to that file we see this:

/*!
 * ionic.bundle.js is a concatenation of:
 * ionic.js, angular.js, angular-animate.js,
 * angular-sanitize.js, angular-ui-router.js,
 * and ionic-angular.js
 */

So it seems this includes all we need for a basic ionic app. The other files are totally unnecessary but they will be still copied to the final APK / IPA.

The problem gets a little bit worse if we add some more bower components to our project. Let’s say we add angular-translate. This obviously depends on angular to work. However doing bower install, bower won’t realize we already have angular (bundled by ionic) and it will install a copy of angular inside www/lib which will eat another 1MB.

So, my questions (probably for Ionic team) are:

  • Why does the ionic bower package come with angular instead of defining it as a dependency?
  • Are there any plans for defining a best practice for cleaning out the raw libraries from the final builds?

Thank you in advance!

2 Likes
2

Have the exact same issue. Have not yet found out any hook which does this so I am manually removing the unnecessary files and stopped using bower.

3

Those are good points. Some good amount of app size could be saved by removing the unnecessary js files. We are working on our own hook to address this issue, but it’d be nice to get a comment on this from the Ionic team.

4

Hi
I had the same concern about unnecessary files.
I found this browsing Stackoverflow. It should do the trick :smile:

Reading nraboy’s blog is really a great help from many aspects
Cheers

1 Like
5

Use an Ionic generator!



What is the best? I don’t know

Regards

6

Hi,

i have the same problem, to optimize my ionic app i use this hook.

hooks/after_prepare/021_bower_cleanup.js

#!/usr/bin/env node

/**
 * After prepare, files are copied to the platforms/ios and platforms/android folders.
 * Lets clean up some of bower files that arent needed with this hook.
 */
var fs = require('fs');
var path = require('path');


var rootdir = path.resolve(__dirname, '../../');

var platformsDirectories = [
  'ios/www/lib/',
  'android/assets/www/lib/'
];

var deleteFolderRecursive = function(removePath) {
  if( fs.existsSync(removePath) ) {
    fs.readdirSync(removePath).forEach(function(file,index){
      var curPath = path.join(removePath, file);
      if(fs.lstatSync(curPath).isDirectory()) { // recurse
        deleteFolderRecursive(curPath);
      } else { // delete file
        fs.unlinkSync(curPath);
      }
    });
    fs.rmdirSync(removePath);
  }
};

var unusedFiles = [
  'angular-imgcache/LICENSE',
  'angular-imgcache/.bower.json',
  'angular-imgcache/README.md',
  'angular-imgcache/bower.json'
];

for (var i in platformsDirectories) {
  for (var j in unusedFiles) {
    var pathToDelete = path.join(rootdir, platformsDirectories[i] + unusedFiles[j]);
    console.log('Deleting unused file ' + pathToDelete );
    deleteFolderRecursive(pathToDelete);
  }
}
7

Those are good points. Some good amount of app size could be saved by removing the unnecessary js files. We are working on our own hook to address this issue, but it’d be nice to get a comment on this from the Ionic team.