Optimize Flex SWF filesize performance loading August 21, 2010Posted by Tournas Dimitrios in Flex.
So you are developing flex applications and are worried by larger swf files created by flex. Don’t worry its quite easy and possible to reduce the file size of flex (Flash builder) created swf’s. I have identified out some major areas that can be focused to optimize the flex application size. These best techniques when followed in flex project will result in improved performance, smaller swf and less memory consumption.
Let’s discuss these six main areas to improve our flex(Flash builder) application:
- Implement RSL in your Project – Runtime Shared Libraries:- Its a flex framework library which contains files required during runtime of flex application. The advantage of RSL is that it’s downloaded once only. RSL simply reduces the file size by approximately 500kb. Implementing RSL is very easy :GOTO Project -> Properties -> Flex Build Path -> Library Path and select “Runtime Shared Library (RSL)” from the “Framework linkage” combobox.
Press OK and you are done. Now application compiles and creates a framework (swz) file along with swf file looks like framework_126.96.36.19958.swz.
Now you must copy this file to your webserver along with your swf file from where it can be downloaded.
One most important thing is that you must have swz file extension added to your webserver. So that it can be accessed using url. Check that by using your website paths to framework if it can be saved to your disk then its fine else get it fixed first from you web administrator.
- Create SWC file of your common code:- If you are using some common classes that are used in many of your flex projects or different swf files then Create a Library Project of your commonly used classes. Now to add this library to your projects :
GO to Project -> Properties -> Flex Build Path -> Library Path and Add folder containing swc file. Now your selected folder path starts appearing in “Build path Libraries”.
Remember to change the “link Type” to “Runtime Shared Library (RSL)”. This file once downloaded will be used for all your swf files running on that Computer afterwards.
- Modules:- Create modules of components that are not required immediately or are optional for the application. And you can load them after some delay or later when required. This way you can reduce the file size and improve application performance.
To create modules:
- Create new module by going to File -> New -> MXML Module.
- Add your code to the module file.
- Add a ModuleLoader component into your main mxml where you want the component to appear and set the url property.
- Loading external content:- Do not embed content that’s not required immediately to be shown as application initializes Load assets at runtime. For example if you want to show a window containing thumbnails on user click , do not embed or load them on application initialize, just load them when user clicks to show that window .This way you will reduce size and improve performance of application.
- Optimize Flex (Flash builder) design and CSS:- Avoid adding heavy skins for components. Use vector designs for skinning. Images are bigger in size, difficult to render and distort on scaling so they should be avoided. Components can be given many effects and colors using style manager class. So for creating multi-color themes, its better to use dynamic styles rather than using multiple skins. Split CSS into multiple files and load them at runtime according to requirement rather than embedding complete stylesheet .
- Using sub-applications:- By creating sub application related functionality can be encapsulated into a sub-application. Sub applications can be loaded using SWFLoader into any application. Sub applications are useful in case an functionality has to be shared across many applications. One major advantage is support for multi versioning. Multi-versioned applications can be compiled with version 3.2 of the Flex framework and later. For e.g. main application can be a Flex 4 application, and the loaded applications can be compiled with either version 3.2 or version 4 of the framework. Which means the sub application does not need compilation again and again.
- 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.
Other links you might be Interested
Steps to optimise swf file size in flash, reduce swf size. How to >>>