CODEWITHSUNDEEP
optimizationbuildqooxdoo
Gonath
Gonath

Reputation: 82

Qooxdoo application's build size optimisation

I would like perform some size optimization on generated files by qooxdoo. 800Ko is quite huge... For information, it is based on a desktop approach.

I'm using this configuration : 

"OPTIMIZE"      : ["basecalls", "comments", "privates", "strings", "variables", "variants", "whitespace"]

Without success...

Any idea ?

Upvotes: 1

Views: 155

Answers (2)

Richard Sternagel
Richard Sternagel

Reputation: 440

The optimization config you are using is the default one. So you should already get an optimized build, when you run ./generate.py build. Look into build/script/{myNamespace}.js. The first part of the script (the managing or loading code so to speak) isn't optimized, but the framework code and your app code is optimized (one long line at the end, which is minified etc.).

The manual has more details:

Upvotes: 0

saaj
saaj

Reputation: 25244

Client optimisation

It's the easy way. Set up gzip compression in your web-server. It'll make your build ~ 200-300 kB. You can even pre-compress your build and serve app.js.gz directly.

Then set up your web-server cache. On way is to configure reasonable cache expiration time, e.g. a week or a month. For more aggressive caching, expiration is set to forever (years) and your build URL looks like /static/app.js?v=123. You can use simple incrementing number, VCS revision or file hash.

Partial build

Harder but more flexible way is to use parts and combine it with client optimisation described above. This way you can build your application in the way that it loads its components on-demand and won't require loading everything upfront. This however requires changing your application, making in more modular and less coupled, which is generally something good though.

In your config.json you need to define parts, the components of your application that usually correspond to different functionality. I usually extent common job like this:

"common" :
{            
  "packages" :
  {
    "sizes" : 
    {
      "min-package"          : 64,
      "min-package-unshared" : 16
    },
    "additional-merge-constraints" : true,
    "parts" :
    {
      "boot" :
      {
        "include" : ["${QXTHEME}", "${APPLICATION}.Application"]
      },
      "functionality1" :
      {
        "include" : ["${APPLICATION}.controller.Functionality1"] 
      },
      "functionality2" :
      {
        "include" : ["${APPLICATION}.controller.Functionality2"] 
      },
      ...
    }
  }
}

Boot part here contains minimal Qooxdoo dependencies required for bootstrapping the application. Note that unlikely your boot part will be less than 500 kB (uncompressed).

Then when you want to use some functionality you do:

qx.io.PartLoader.require(['functionality1'], function()
{
  new (qx.Class.getByName('app.controller.Functionality1')).doSomething();
}, this);

Note that the part loader resolves dependencies for you, as part functionality1 may have its dependencies. In fact, partial build with 3 defined parts above may lead to less or more than 3 files in result. The generator uses sophisticated dependency management so it can split and collapse parts if it benefits the load performance.

Upvotes: 0

Related Questions