Optimizing Flex when multiple modules are used

Question

I have a Flex application where load time is extremely important (consumer site). i want to be able to get something up on screen and then allow additional modules to be loaded as necessary.

The issue I'm facing is that the sum total of all the modules is much larger than if i were to include all the components in a single .swf file.

Its pretty obvious why. For instance the classes needed for web service access seem to take about 100kb. If I dont use those classes in my main.swf then they'll be included in EVERY module that uses them. So if I have 5 modules thats an extra 500kB wasted.

In theory I want 3 levels

main.swf - minimum possible layout / style / font / framework type stuff common.swf - additional classes needed by module 1 + module 2 (such as web services) module1.swf - module 1 in site module2.swf - module 2 in site

I dont know if this is even possible.

I'm wondering if I can load swz/swf files for portions of the framework instead of the entire framework.

I really need to get my main app size down to 200Kb. It grows to 450kb when I add web services and basic datagrid functionality.

Any lessons learned would be appreciated.

Answer 1

You could look into the ModuleLoader class, maybe you can load up your core stuff in the first 200kbs then load the rest when and if it's needed.

Also it's worth bearing in mind that any SWC's you use are embedded at compile time whereas any SWF's are loaded at runtime.

Answer 2

Flex is a bit of a pig when it comes to file size. There really is only one way to get your app sizes down and that is to use an external swz for the framework. There is an Adobe Devnet article on Improving Flex application performance using the Flash Player cache which I recommend you read.

On a project I worked on we had problems with our preloading module sucking in classes that we didn't want. What we had to do was create interfaces to the classes that resided in the other modules and reference them that way. When the module is loaded we simply assigned a reference to the IApplicationModule in order to call our initialization code.

Also look into putting your classes into a seperate SWF file and then use ApplicationDomain to get access to the classes

(this code taken from this forum post which explains how to access classes loaded from modules in Flex)

private function loadContent(path:String):void 
{
   var contentLoader:Loader = new Loader();
   contentLoader.contentLoaderInfo.addEventListener(
      Event.COMPLETE,
      loadContent_onComplete);
   contentLoader.load(new URLRequest(path));
}


private function loadContent_onComplete (event:Event):void
{  
   var content:DisplayObject = event.target.content;

   if(content is IFlexModuleFactory) 
   {
      var content_onReady:Function = function (event:Event):void 
      {   
         var factory:IFlexModuleFactory = content as IFlexModuleFactory;
         var info:Object = factory.info();
         var instanceClass:Class = info.currentDomain.getDefinition(
            info.mainClassName) as Class;

         addChild (new instanceClass ());
      }

      content.addEventListener ("ready", content_onReady);

   } 
   else
   {
      addChild (content);  
   }
}

Answer 3

There is an option on the command-line compiler to exclude class definitions that are already compiled into another swf. It works like this:

1. Compile the Main Application (which contains a loader) and opt to generate a report.
2. Compile the Module and opt to exclude classes in the above report.

Answer 4

Hey all, I know this was awhile ago, but I figured I'd post another response in case anyone is still looking for an answer on this.

I've been looking into optimizing Flex apps and, after some checking into it, have decided to use Modules. Primarily 'cause they have such good options for optimization.

The two mxmlc commands you need are:

mxmlc -link-report=MyAppReport.xml MyApp.mxml

and

mxmlc -load-externs=MyAppReport.xml MyModule.mxml

My external swf (using the Flex Framework) is now only 21k. It's doing much (yet), but even as it does more and more, it will continue to use resources from the main app code.

Here's the batch file I created to speed up the process (you have to have put mxmlc in your Environment Path variable for it to work like this. Control Panel -> System -> Advanced -> Environment Variables, Edit the Path System Variable, adding the path to your mxmlc (requires a reboot)):

cd C:\Projects\MyProject\Develop\Modules
mxmlc -link-report=MyAppReport.xml C:\Projects\MyProject\Develop\Source\Main.mxml
mxmlc -load-externs=MyAppReport.xml MyModule.mxml
move /Y MyModule.swf ..\Runtime\Modules

More info here: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_4.html

Hope that helps!

• Evan

Answer 5

this may help you , an article on flex file size optimization
http://askmeflash.com/article_m.php?p=article&id=9