Additional Tips to Optimize Flex SWF Filesize
I wrote previously about Flex 3 Optimization and SWF Filesize. Recently I have come across some new (to me) techniques to both reduce total swf filesize for Flex MXML applications, and improve the user experience. I thought it might prove useful to summarize those here.
1) Separate out the core Flex framework code
To do this, go to Project > Properties > Flex Build Path > Library Path. Change the "Framework linkage" from "Merged into code" to "Runtime Shared Library (RSL)". This will take that framework code and create 2 separate files, removing that weight from the application swf. In my case those files are:
framework_3.0.0.477.swf
framework_3.9.9.477.swz (this file is an Adobe signed version for greater authenticity/security)
The Flash Player will only load the framework if the local system doesn't already have the framework file loaded from a previous application.
Before Filesize: 753739 bytes
After Filesize: 288632 bytes
2) Separate out common code libraries
When using common code across modules of the application, you don't want that code redundantly compiled into each swf (assuming the application will have multiple swfs). So, just as in the previously example the framework was compiled separately as an RSL, we can do the same for our own libraries of code.
The first step is to copy that code to a new project and compile it as a SWC. A SWC is best described as a package or archive of files. Actually, you can rename a SWC file to a ZIP file and view the files.
1) Create a new Flex Library Project.
2) Copy your code into the src folder of the new project.
3) Open Project > Properties > Flex Library Build Path and select the folder to compile.
4) Build the project. If you have an dependencies, you'll need to add those to get this code to build without error.
Now you can add this Library Project in your application project. To do so, remove the folder of code now resident in the library. Then go to Project > Properties > Flex Build Path > Library Path and select Add Project. Choose the library project and you're done. Build to make sure your project still works.
At this point, that code is still being merged into your application swf. To get this code separated return to the Library Path dialog and expand the library to view the "Link Type". Click Edit and change the type to RSL. Now the library will be loaded only once when it is required, and subsequent swfs will not need to load it.
After Filesize: 187349 bytes
3) Lazy Loading Modules
Flex Modules, like Applications, are classes that can be compiled into separate swfs and then loaded when needed using the Flex ModuleLoader component. The ModuleLoader only loads the external swf once, and only loads the swf when called. So, the initial swf filesize can be drastically trimmed and the load spread across multiple swfs loaded as the user requires them or as the developer decides to buffer load them in. Clearly this most benefits larger applications.
Basic Steps to create a Module
1) Identify a section of your application that you can separate out.
2) Add a new module mxml by going to File > New > MXML Module.
3) Copy your code from the application to the module file.
4) Add a ModuleLoader component into the vacated space where the module goes in the application, the only required property is the url of the compiled module swf.
5) Refactor your code within the module as necessary.
That's it. The main swf size will shrink and you have effectively optimized.
Here are some useful Adobe documentation links regarding modules:
Creating Modular Applications: http://livedocs.adobe.com/flex/3/html/modular_1.html
Writing Modules: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_3.html
Loading Modules: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_5.html
Compiling Modules: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_4.html
I've probably completely glossed over some foundation Flex information. I think the above URLs and related information provide decent guidance, and with the information above you can likely find some new terms to google that'll lead to other useful blogs and resources. That's how I learn anyway.
Flex • Permalink


