Flex Application Size

Don’t forget

By default Flex Builder compile application to debug build,
Don’t forget before deploying your application to production server to export release build
Project -> Export Release Build…
release build can be twice smaller than debug version

EXTERNALIZING ASSETS

There are a number of ways to externalize code and assets.

MODULES

If there is application functionality that not every client will use or may not be used right away, you can split it into a module; a module is compiled into its own SWF and then is loaded at runtime via code. The root tag in an MXML file defining a module is mx:Module. Modules are loaded at runtime using the ModuleLoader.

RSLS

If you have multiple applications that share some of the same code libraries, you can use runtime-shared libraries to only require the code be downloaded once and used by both applications during the browser session. Note, only Adobe signed runtime-shared libraries can persist on the client and be cached by the Flash Player after the browser is closed. This is a new feature available in Flash Player 9 Update 3 (9,0,115,0) that enables the Flex framework to be cached and used by Flex applications from any domain.
More info on RSLs at livedocs

RUNTIME CSS LOADING

You can load style sheets at run time by using the StyleManager. These style sheets take the form of SWF files that are dynamically loaded while your Flex application runs.
By loading style sheets at run time, you can load images (for graphical skins), fonts, type and class selectors, and programmatic skins into your Flex application without embedding them at compile time. This lets skins and fonts be partitioned into separate SWF files, away from the main application. As a result, the application’s SWF file size is smaller.

RUNTIME LOADING OF ASSETS

The Image control in Flex takes a source which can either be an embedded image or a relative path to the image. When the latter is specified, the image is loaded at runtime and is not embedded into the SWF file.
Embedded image:

<mx:Image source=”@Embed(source=’./assets/butterfly.gif’)”/>

Image loaded at runtime:

<mx:Image source=”/assets/butterfly.gif”/>

SUB-APPLICATIONS (Flex 3.2)

As of Flex 3.2 (and higher), there is now an additional option: sub-applications.
The PDF of the chapter in the doc is here:
Chapter 1: Developing and loading subapplications
http://livedocs.adobe.com/flex/3/loading_applications.pdf
The original planning overview (then code named “Marshall Plan”) can be found here:
http://opensource.adobe.com/wiki/display/flexsdk/Marshall Plan

Additional info:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12169

http://www.countermarch.com/blog/index.cfm/2008/2/26/Optimizing-with-Flex-3

http://www.simplyprofound.com/post/Flex-3-Optimization-and-SWF-Filesize.aspx

http://www.slideshare.net/dcoletta/optimizing-flex-applications

http://wireless-watch.com/2008/04/24/reduce-the-size-of-a-flex-3-application-avoiding-unnecessary-references-with-the-getqualifiedclassname-method

http://livedocs.adobe.com/flex/3/html/help.html?content=performance_06.html

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.