Blog for Nayan

Jul 23 2008

Reducing Main Application file size in Flex

Published by Nayan at 3:06 pm under AS 3.0,Flex

I know you might have come across the usual posts for reductions of file size of a Flex swf. Some of them are listed below incase if you don’t already know about it.

Use the optimize parameter for the compiler.
Don’t embed images, load them during runtime.
Use only classes which are required, import only single class instead of the complete package.
try using modules instead of developing one single application.

There is one more thing which is really useful if you are looking to and i haven’t it being discussed that much.

Convert your CSS files into SWF files and then load during runtime.

When you use stylesheets to customize your Flex application, we usually import it in the mxml using the <style> tag. I would recommend using StyleManager class to load the styles swf file during pre initialization of your application.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”1024″ height=”768″ preinitialize=”applyCSS()”>

applyCSS would look something like this,

private function applyCSS():void{
StyleManager.loadStyleDeclarations("styles/mystyles.swf");
}

To convert your CSS into SWF in Flex Builder simply right click on it and then select convert to swf file.

Overall ofcourse your will be still loading in that styles swf file, so the bandwidth usage will remain the same but the initial load time will be less.

You might argue that it will be the same wait time for user to interact with the application but atleast the initial preloader will be on screen for less amount of time.

Also depending on your application you can break it into multiple stylesheet documents and then load the required styles when a particular module loads thereby getting a lot of leverage from this technique. Hope this helps