Minification

Introduction

The apps to be released (.apk or .ipa) are minified during the building process.
Appery.io uses Grunt JS Task Runner for minifying code in its projects.
Minification (also minimization or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from the source code without changing its functionality but reducing the released app. Unnecessary characters usually include white space characters, newline characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

During the minification process, functions and variables get renamed and code fragments are modified (obfuscated). Most of the modifications lead to securing and reducing the code, but some problems may arise calling for changing minification settings.

Managing AngularJS Apps Minification

Minification can be user-managed and all the settings are found under the Source tab: WEB_RESOURCES > test > Gruntfile.js:

The default settings use requirejs.
When the app starts all of the files connected to it are combined into a single app.js file, which is minified:

If any of your files (libs or custom JS) return an error during minification, you can repair the code or update the minification settings to avoid further errors making changes to the minification settings, adding the erroneous files to the ignore list, or disabling minification.
Let’s have a look at some examples.

Changing Minification Settings

If you have added some library and want to delete the extra files when building a release app, you may define the path to the files to be deleted in the src array of the clean:unused task:

Disabling Minification

To fully disable minification, delete the following tasks from the default tasks list:

• requirejs:compile
• copy:restoreAngular
• copy:copyPlugins
• clean:plugins
• replace:buildindex

Besides, you must correct the copy:tmpApp task, changing the destination folder for copying: build/www in place of temp_app/www:

Adding Custom Modules

You can also add a third-party grunt module to be used for minification (for example, image minification module). To do this, create a node_modules folder and upload the needed grunt module to this folder. In cases the module is very bulky (and the Builder notifies on upload error), you can split the folder into several .zip files and upload them separately.

Then, you can add this module to Gruntfile.js – grunt.loadNpmTasks('module-name');, create the task and then add this task to the default tasks array.

📘

Note

Keep in mind, that minifying the JavaScript code for PhoneListCtrl controller brings about the problem of correct services identification. You can check here to learn how to overcome the problem.

More details on how to define the minification settings can be found here and here.