37

I'm building a Cordova 3.5.0 application. I use grunt to build a minified web app, then I use cordova CLI and cordova hooks to build a platform specific package. I use more than 10 different plugins, some Cordova official ones and some custom. I'm wondering how to concatenate and minify the JS files from the plugins with my other 3rd party libraries.

After executing cordova prepare I see a generated cordova_plugins.js file with the following content:

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/org.apache.cordova.globalization/www/GlobalizationError.js",
        "id": "org.apache.cordova.globalization.GlobalizationError",
        "clobbers": [
            "window.GlobalizationError"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.globalization/www/globalization.js",
        "id": "org.apache.cordova.globalization.globalization",
        "clobbers": [
            "navigator.globalization"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "org.apache.cordova.globalization": "0.3.1"
}
// BOTTOM OF METADATA
});

I know how to minify and generate a single file with these plugins but not how to tweak the cordova build process to get all clobbers from a single file but different packages. My first thought is all the process has to be accomplished in an AFTER_PREPARE step, inside the platforms/<platform>/assets/www folder

Sadeshkumar Periyasamy
  • 4,718
  • 1
  • 24
  • 29
sgimeno
  • 1,833
  • 1
  • 22
  • 35
  • 4
    I'm curious why you feel the need to concatenate/minify your plugin files. Are they really so large as to drastically increase the size of your compiled binary? Even with a decently large codebase with lots of plugins, none of my Cordova apps have even scratched 10mb, which is significantly smaller than any native app. – ejensler May 11 '15 at 03:43
  • My question came after the discussion generated by this question: http://stackoverflow.com/questions/10532376/minifying-code-for-phonegap-app/10703735#comment37498433_10703735. See Wytze comment – sgimeno May 11 '15 at 16:00
  • You can go with require.js optimizer plugin . – Sunil Sharma Jun 01 '15 at 04:59
  • @sgimeno I don't think you can do that. cordova makes a loop with all the modules and another loop with all the clobbers. You can either leave one "file" property with your file and all the others with an empty string which will trigger an error or point everyone to the same file that will cause your script to be injected multiple times. This is not very efficient and contradicts the purpose of your question. – devconcept Jun 01 '15 at 14:28
  • 6
    @devconcept On June 10th 2015 a new cordova version it's been released including an interesting feature: `cordova prepare --browserify` which is browserifying the plugin javascript interfaces, so thanks to the cordova team I think half of the goal I wanted to achieve is already made. I will dig deeper and try to find a definitive solution for the issue. – sgimeno Jun 11 '15 at 08:20
  • 1
    @sgimeno I imagine they refactor the entire plugin system. This include the way plugins are installed as they are anouncing on the website. Unfortunatelly this will only work on the new applications and not on any previous work you have done unless you upgrade. I will install the latest version and give it a try. – devconcept Jun 11 '15 at 15:26
  • You can also skip the CLI and create your own build process using the "Platform-centered workflow" described in the Cordova docs. Basically you get the cordova.js file for your platform from a template project and from there on you can minimize and concat it to other scripts. – Mister Smith Aug 03 '15 at 22:02

1 Answers1

1

Minification does improve performance for two reasons:

Reduced file-size (because it removes comments and unnecessary white-spaces), so your script loads faster. Even if it is embedded into the .

It is parsed faster, since comments and white-spaces don't have to explicitly ignored (since they're not there).

BUT, it is only going to make a real difference if the file is big (2000 lines or more), like jquery. There is no point minifying a 20 line file.

Shaunak
  • 11
  • 2