How to decrease a Flex application files size (FB 3 & FB 4 Gumbo)

By Adrian Sule

Published August 15, 2009

Best Practices

Rating:

Adrian Sule

Hi, I'm a Romanian Flash Developer, based in the UK, and I probably have a bunch of articles in my head that need to be laid down in writing. Graduated a Bachelor Degree in Computer Science, and have been working within Digital Agencies for the last 4 years now, in the Creative team as a Flash Developer and sometimes Designer. http://www.adriansule.com

View all articles by Adrian Sule

Let’s assume you have a simple Image Display application built in Flex, which after being compiled has the .swf files size of 600kb.
I’ve got good news for you because there is a way to make your application up to 10 times smaller, so continue reading.

Step one:
Create a ‘Release‘ version of your application.
In previous Flex Builder verisons when you clicked the Debug button, Flex was creating for you the Debug and Release version of the application.
But now with Flex Builder 3 and Gumbo, you have to create the Release version your self, by clicking the ‘Release Build’ button, which should create a new folder named ‘bin-release‘. After clicking ‘Finish‘, your Release version of the application will be built. Now have a look inside the ‘bin-release‘ folder at the size of your new .swf file - it should be almost 2 times smaller in our case 250kb, which is still big.

Step two:
Next try to create a Flex Module from main your application, and add the module to the main application using

<mx:ModuleLoader url=&#8221;YourModuleName.swf”/>

Compile your Release version again, therefore your application .swf file should now be around 170kb which is still big! And it’s all because the entire Flex framework is included in your Release swf file, which you don’t really need to have.
Every time you visit a Flex content website, you are actualy downloading the same framework over and over again.
With the release of Flash Player 9 .0.1.25 a caching mechanism has been added for that framework, so you can avoid including the framewrok in your application as step three instructs.

Step Three:
You need to change the Framework Linkage to Runtime Shared Library (RSL). To do this you must go to ‘Project Properties > Flex Build Path > Framework Linkage’‘
Press the Release button again to make a new release version of your application.
Check the .swf file size, and you have around 50-70kb which makes a big size difference from 600kb.

Notice:
Flex Builder 3 (and Flash Builder 4 Gumbo) has now built two extra files for you, next to the main application .swf file, which represent the entire Flex framework files. You need to also add this two files on your website, to the same root level where the main application swf is located.
Those files will only get downloaded by visitors who never accessed a Flex 3 application site before, the rest won’t need them because they will probably have it cached.

Download examples (examples created using Flash Builder 4 Gumbo Beta):

AppFileSize_BIG.zip > This app swf size will be 654kb (/bin-debug/AppFileSize_BIG.swf)

AppFileSize_SMALL.zip > This app swf size will be 74kb (/bin-release/AppFileSize_SMALL.swf)

www.adriansule.com

Spread The Word

8 Responses to "How to decrease a Flex application files size (FB 3 & FB 4 Gumbo)"

nicemandan Rating: ratingfull

said this on 12 Sep 2009 9:40:35 AM CST

Beware that creating modules and optimizing them isn't that straightforward if your modules are in a separate project.

I have a situation where the whole application is made with a collection of Modules in one project, the Application itself is in another project and is simple a shell that loads and manages the modules that house the business logic of the app (the reason for this is I can change / re-purpose the application just by swapping out the modules).

However, even creating a link report from the Application and using load-externs in the Modules project, my swfs were still very bloated even after removing the framework to RSL's (500k +). I suspect this is because the Application is "thin" and hardly uses any components, whereas each module uses a lot of components and the optimization is top-down from the Application.

So I think I need to import and declare all components I'm using in the modules project into the Application, which is a pretty clunky way around it.

(Reply to this comment)

Om Soni Rating: ratingfull

said this on 03 Jan 2010 9:48:00 PM CST

Well, it took me 15 minutes to read and implement your suggestions. Very helpful. Thanks

(Reply to this comment)

Mark Rating: ratingfull

said this on 26 Feb 2010 11:16:10 AM CST

another good detailed article

<a href='http://askmeflash.com/article/9/optimize-flex-swf-filesize-performance-loading'>http://askmeflash.com/article/9/optimize-flex-swf-filesize-performance-loading</a>

(Reply to this comment)

heihei Rating: ratingfull

said this on 30 Aug 2010 3:29:09 AM CST

I hate RSL, because it still have to download the flex library if user didn't download and cache the library before.

(Reply to this comment)

Nicola Rating: ratingfull

said this on 27 Oct 2010 11:22:56 AM CST

Great trick! but why ModuleLoader help make the app smaller?

(Reply to this comment)

Tahir Alvi Rating: ratingfull

said this on 24 Jan 2011 12:06:07 AM CST

Hi,

i have read above discission and asume that now i need to implement the module in place of custom component.

is am right ?

i am developing a face book game that is big problem for slow loading and when application is running it very slow to navigate within the view states.

Can i make all my components to swf modules that load in different states?

Thanks .

i am waiting your reply.

(Reply to this comment)

mitesh dave Rating: ratingfull

said this on 17 Feb 2011 1:27:28 AM CST

Does any one knows ,why the SWF size in released version has lesser size then that of debug version?

(Reply to this comment)

Aileen Rating: ratingfull

said this on 23 Apr 2011 10:11:44 AM CST

Kudos! What a neat way of tinhking about it.

(Reply to this comment)

Rate this article and leave a reply:

Rating: *

Poor Excellent

You are replying to the above comment.Cancel this "reply".

Your Name *:	Email (private) *:	Website:

Please copy the characters from the image below into the text field below. Doing this helps us prevent automated submissions.
Security Code:

Adrian Sule

Spread The Word

8 Responses to "How to decrease a Flex application files size (FB 3 & FB 4 Gumbo)"

Categories

Featured Jobs

Recommended Links

Recent Articles