Flex 2 added a neat little feature which allows you to load Runtime Shared Libraries, from other domains. And since the browser caches these libraries in theory we could all point to a central set of Flex 2 Framework RSLs and users of your application would only have to download the RSLs the first time they went to an application which used them. Before I show you how to make this work, lets talk about the caveats… First and most important, THIS IS UNSUPPORTED BY ADOBE. While the Flex team is working on a better, more permanent solution to this problem, this is really a hack and despite the fact that I am using this in my applications, neither I or Adobe warranty or support the use of this in any way. Second, since there is no failover mechanism, until we find a better home for the RSLs, if you choose to point to my hosted RSLs, your application will be at the mercy of my web server. Third, if someone hacks my web server and uploads new cracked malware RSLs, or uses a man-in-the-middle attack to replace the RSLs in flight, then you (and I) have been p0wned. Fourth, I, James Ward, may have included modified Flex framework files which do bad things, like track user behavior/input and report them back to my server. While I promise I have not done this, if you choose to use these RSLs, you are putting your trust in my promise.
So despite the caveats, I still think this hack is sufficient enough for many applications. Flex engineering is really working hard to make this work for everyone. In the mean time what is outlined here may likely help you to dramatically reduce SWF size. Read on to find out how.
Quick Start
I’ve created 3 RSLs, a small one, with just the dependencies of mx.core.Application and a medium one with what I guessed were the 20 or so most commonly used components, and then a large one with over 30 other components. Each RSL does not include the contents of the smaller RSLs. So if you want to take advantage of this technique using the medium RSL, then you will need to use the medium AND the small RSL. Here is table with the information about the RSLs:
| RSL | Size | SWC | Linker Source | SWC Catalog |
|---|---|---|---|---|
| small | 106K | Download SWC | smallLinker.as | Catalog XML |
| medium | 160K | Download SWC | mediumLinker.as | Catalog XML |
| large | 141K | Download SWC | largeLinker.as | Catalog XML |
Once you have decided which RSL to use, follow these instructions:
1) Download the SWC for the RSL(s) you want to use from ws.jamesward.org
2) Fix your build path
2.1) If you are compiling via Ant or the command line, then specify your external-library-path and runtime-shared-libraries like:
flex2-sdk/bin/mxmlc \
-external-library-path+=build/framework-2_0_1_b-small.swc,build/framework-2_0_1_b-medium.swc \
-runtime-shared-libraries=http://ws.jamesward.org/framework-2_0_1_b-small.swf,http://ws.jamesward.org/framework-2_0_1_b-medium.swf\
-o=build/testHostedFlexLibs-medium.swf \
-file-specs=test/testHostedFlexLibs.mxml
2.2) If you are using Flex Builder then go to Project -> Properties -> Flex Build Path -> Library Path -> Add SWC -> [Enter or browse to the first SWC] -> Add all the SWCs you will be using. Then select a SWC’s RSL URL and select the Edit button. Change the Link Type to “Runtime shard library (RSL)”, set the RSL URL to the correct swf url on ws.jamesward.org, deselect the “Auto extract checkbox”, and then select the OK button. Repeat this for each SWC. When done, select the OK button to exit the Project Properties. Here is what my Build Path looks like:
2.3) If you are using FDS, then just add the SWC(s) to your flex/user_classes dir and update the runtime-shared-libraries accordingly in the flex-config.xml file.
3) Recompile your Flex app (if Flex Builder didn’t do this for you automatically) and the file size should be significantly lower!
4) One more caveat… You have to actually load your application from a web server for it to work. This is due to the Flash local OR network sandbox. Maybe someone can suggest a better workaround.
How It Works
This all starts with the Preloader. The out of the box preloader doesn’t support cross domain loaded RSLs. If you use my hosted RSL(s) then you don’t need to worry about this since it includes the patched Preloader. However, if you are interested in really knowing how this all works, or if you want to download the source code and play with it, then here is what you need to do. In order for your application to be able to use the classes in the crossdomain loaded RSL, the Preloader needs to specify the securityDomain for the loaderContext of the RSLs. So in the loadRSL function of my patched mx/preloaders/Preloader.as file I have:
loaderContext.securityDomain = SecurityDomain.currentDomain;
loaderContext.applicationDomain = ApplicationDomain.currentDomain;
The source code I use to build the RSLs is available on Source Forge. If you want to play with the code, then you will need to copy the Preloader.as from the Flex SDK’s source code, update the RSL loaderContext as noted above, and add the import for the flash.system.SecurityDomain class.
You can also see that I have a wildcard crossdomain.xml policy file on ws.jamesward.org which allows Flash player to load the RSLs no matter what domain the requesting application is hosted on. One quick note on crossdomain policy files, since I don’t think it is said clearly enough, and often enough…
DO NOT EVER PUT A WILDCARD CROSSDOMAIN POLICY FILE ON A DOMAIN IF EITHER OF THE FOLLOWING APPLY:
– THE DOMAIN IS USED FOR COOKIE BASED OR BASIC AUTHENTICATION
– THE DOMAIN IS ON AN INTERNAL NETWORK
Now about the small, medium, and large RSLs… For now I opted to use just three RSLs to keep it simple. I am using just simple linker classes and compc to create the SWCs, then expanding the SWCs to get the SWF, which is the RSL. You can see all this in the source code, specifically, the build.sh file. I have also guessed at the best way to organize the RSLs (as far as what classes go where), but definitely want to hear what others think.
Now the fun part… To prove this all works, first go to the test app on www.jamesward.org and watch as the RSLs are loaded from ws.jamesward.org. You should now have all 3 RSLs in your browser cache and if you now go to another test app on a different domain the application should load much faster since it only needs to load 72K instead of what would have been over 400K (my test app doesn’t use all the classes in the three RSLs).
The Future?
I’d really like to hear feedback if this is a viable hack for those looking to reduce Flex app size. Let me know if you plan to use this technique, or if you don’t, why? What should be different? Also, I think someone could further hack the preloader to support failover and md5 checksums. Any takers?
Thanks in advance for your feedback!
62 Comments
That’s awesome work. Thanks for sharing.
Good idea! Static url RSL files could be cached not only by browser, but also ISP cache servers(like akamai and any local ISP) to make fast even for first time download.
When I use Flex Builder to add the build path, I can add the SWC just fine, but when I get to this part:
[Change the Link Type to “Runtime shard library (RSL)”, set the RSL URL to the correct swf url on ws.jamesward.org, deselect the “Auto extract checkbox”, and then select the OK button.]
I get the following error:
Error: Flex Builder cannot auto extract the RSL swf since the specified destination RSL URL is not relative to the application swf.
I’ve downloaded the swfs and I am hosting them on my server (the same server that is serving out the flex app) and the crossdomin stuff is fine — not that any of this has to do with the above error.
Any ideas? Hope I’m not missing something.
Thanks.
Sorry, my Bad, I didn’t deselect the “Auto extract checkbox”. Sorry.
Thanks.
Tacking these lately. Thanks for your incite. :)
Do you have these built for the new 2.0.1 update? If so, can you make them available?
Thanks.
I’ve just uploaded new SWCs & RSLs for 2.0.1.
-James
Following your steps, only using the new 2_0_1 files and links, I was unable to get this working. Upon loading I get “VerifyError: Error #1014: Class mx.controls::List could not be found.”
Followed by the same error for all the classes.
I hadn’t tried in 2_0_0 before, but I’m not sure that’s my problem.
Any suggestions?
Hmmm… That’s interesting. My test swf’s seem to be working. Make sure you don’t have and aren’t point to any of the 2.0.0 files. I need to update my blog instructions to point to the 2.0.1 files…. Doing that now.
All the instructions should now be updated to 2.0.1.
I downloaded the .swc files, referenced them in the library path tab in flex builder, changed their link type and specified the RSL URL correctly. I then built and deployed and accessed via a web server, then getting that class not found error.
Is there anything else I need to do like create a crossdomain.xml or setup a preloader hack of my own? I’m going to try building my own swc’s, maybe that will help.
Is it possible your 2_0_1 swfs are missing some classes that the swc has?
Its essential we get something like this working as we’re wanting runtime loaded modules, but don’t want to pack the framework into each module. I’m surprised adobe hasn’t done this officially yet as the flex framework is pretty large!
Hmm… I am not sure why this isn’t working. I will do more research. However, there might be an easier solution for you. If you do not need to use my hosted RSLs, you can easily create your own. Also you can look into the new concept of Modules in Flex 2.0.1. Let me know if either of those will work for you. In the mean time I’ll try to figure out why this stuff isn’t working.
I downloaded the zips but they only contain .swf files, not .swc files. Where are those located?
Hi Rob,
Which zip files did you download?
You can find all the files at:
http://ws.jamesward.org/
-James
The trick is to just rename the .zip files to .swc files since that is basically what a .swc file is anyway. This is cool stuff, thanks.
I have this working and I’ve hosted my own RSLs my server. Does anyone have info on when and where Adobe would host a set of common framework RSLs. That’s really the key to this technology. Otherwise we find a big server and collaborate.
The Flex team is currently looking at how to best implement this feature.
Production apps don’t need RSL with debug enabled.
The whole flex framework is about 475K once you strip out debugging info.
The RSL listed here are roughly twice as big as they could be.
Hi Metal,
The RSLs were compiled with debugging set to false. Is there some other way to further reduce the size?
-James
Unfortunately, compc seems to ignore the debug parameter as far as I can tell.
The .swc it generates are well suited as static libraries, but not RSLs.
In production, you’re better off building them as a regular application, containing only one of your linker .as files (but changed to subclass Sprite)
The resulting .swf will be a drop-in replacement for the .swf extracted from a .swc, and will usually be at least half the size.
For example, to redo the “small” RSL:
- create a new “Flex Project”. pick a name.
- delete the default .mxml file in there.
- put your own file, smallLinker.as in it
package {
import flash.display.Sprite;
import mx.core.Application;
public class smallLinker extends Sprite {
private var application:Application;
}
}
- open the project properties, go to “Flex Applications”, click “Add…” and select your file. ok, ok.
- build, if it doesn’t do it automatically.
You should now have a .swf under bin/ that weighs in at ~109K bytes, and can be used as a straight replacement for framework-2_0_1_a-small.swf
Rinse and repeat for other RSLs.
Wow! That is strange stuff. You are totally right. I’ve rebuilt the RSLs and they are much smaller. Thanks!
Hi James,
I am working for a small company (around 800 People).
I worked with Flex 1.5 and Java (Flex 1.5 – UI, Java – Middle Tier, Oracle – Back End) and I was successful in displaying whatever the requirement is (This is for Proof of Concept and not for any production purpose). I was so happy that from that point of time, Flex is going to be a big hit in the IT market.
One year ago, when Flex 2.0 was launched, from Singapore Adobe office a person gave presentation on Flex 2.0’s features(Sorry I forgot his name :-)). After the presentation is over, I asked him why printing option is not working fine. He told me that still adobe is working on resolving issues on printing. I think until printing can be acheived completely, Flex cannot get in to Enterprise Applications. If you can help me in this aspect, please reply me to the above mentioned mail id. Thanks in advance.
Logu.
Cool. Glad to be of some help.
I read your blog entry a while ago, and realized how powerful this was, but I didn’t actually try to reproduce your results until recently.
One issue that cropped up had to do with the Preloader class.
The Preloader is in charge of loading RSLs, and as such has to be part of the core .swf to be useful. Your entry mentions things should just work because you include the modified Preloader in one of the RSLs, but I’m not sure this is how it works.
In my testing, after putting a few trace() statements in a modified Preloader class, that class was getting entirely ignored when placed in an RSL.
On the other hand, if linked directly in the main .swf, the statements would show.
Also, it’s not entirely obvious how to override a standard Flex class without having to do unspeakable things to framework.swc. The method I settled for requires creating a new Flex library, copying over Preloader, RSLEvent and IPreloaderDisplay (and maybe Version.as), and adding the resulting SWC in my project’s Library Path, *above* framework.swc.
Finally, a small enhancement to Preloader to allow apps to still work locally:
var loaderContext:LoaderContext = new LoaderContext();
if (Security.sandboxType==Security.REMOTE) {
loaderContext.securityDomain = SecurityDomain.currentDomain;
}
loaderContext.applicationDomain = ApplicationDomain.currentDomain;
(it almost makes you wish there was a gettter on LoaderContext::securityDomain to enforce that rule for you..)
I forgot to mention, framework.swc should be removed from the Library Path of the new Flex library that attempts to override it.
Otherwise, it seems the SWC classes win over the project classes.
I found small issue in application using your solution. I have following code:
….
private function getPath(host:String,port:String,path:String,login:String,password:String):String{
return ‘../remoteImage.php?id=’+data.@id+’&size=’+image.width+’x'+image.height
}
problem is if I have “..” in path, if there is http://domain/remoteImage.php works ok. If “..” flex request is
/%5B%5BIMPORT%5D%5D/remoteImage.php. Maybe you or someone point me on right direction why? I used small and medium linker for test.
Hi rwas,
Have you tried this without the RSLs? Also, what url is the html containing your SWF being served from?
-James
If I compile without RSL code works as expected. My compile command:
(In ant. I rewritten your bash script for ant too).
Function that I cited in previous post is used for data binding:
Hi, James,
For 2.3, what do you need to set in runtime-shared-libraries in the flex-config.xml file?
Thanks.
Hi Tony,
The runtime-shared-libraries needs a url to the RSL (swf). So depending on which of the RSLs you use the url will be different. Does that answer your question?
-James
I have recently implmented a RSL into a multi swf application. When a new swf is created it imports a class that resides in the RSL and extends it. The imported class from the RSL is a base class that all new swfs will extend. Does the imported class get compiled into the swf that imported it even though it is contained in the RSL? My concern is class collisions since these swfs will be loaded and played consecutively in a parent swf and may not all be recompiled each time a one of them gets updated. Various versions of the imported class will definitely be a problem for me, which is why I implemented the RSL in the first place. I hope that made sense…
Thanks in advance for any responses :)
mxmlc shouldn’t duplicate classes. But you can verify this by looking at the output of mxmlc’s link-report option. Let me know if that helps.
-James
Thanks for the reply, I will definitely give that a shot…
Now for my next RSL n00b question…
I have 3 seperate applications utilizing code across 3 RSLs. There is a logical seperation. The goal obviously was not to duplicate code within each application, so it was broken into RSLs.
Now here is the issue. In RSL#1 I need to access classes in RSL#2. Since the option to use a Library project as an RSL is not available in another library project I was trying to link them externally. When I do that, I get all sorts of errors regarding the core MX classes not being available etc. If I switch the link type to “merged into code” everything works fine… but merging code from one RSL into the other RSL at compile time defeats the entire purpose. What am I missing regarding setting the link type to external?
All I want to do is share code without having multiple copies in different locations to avoid versioning issues and seperate things into chunks that can be updated independantly of each other. Am I expacting to much from RSLs?
Thanks for your help! This is about the only place I am finding any answers regarding RSLs!
:)
I don’t totally know the right answer to your question when it comes to Flex Builder. Typically for complex builds I use an Ant script. If you look at the build script I used to create the RSLs for this experiment, you will see the mxmlc and compc options I use to create and use three different RSLs, each with different classes files in them:
http://flexapps.cvs.sourceforge.net/flexapps/hosted_rsls/build.sh?view=log
Sorry I’m not more help on the FB front. Let me know if that helps.
I will look into using an ANT script and the link-report option. Thanks a million for your help!!! I’m sure you’ll be see me here again…
Shane
So I noticed that when Metal recommended a way of reducing file sizes, you posted back that you took his advice and shrunk your files. I also see that you indicated small file sizes on this page, but when I go to download your files they indicate the larger file sizes.
Am I missing something?
Thanks.
Hi Shaun,
The SWCs are the same size, but the RSL SWFs are significantly smaller. And since the RSL SWFs are the ones which actually get loaded, that is why reducing their size is important. The SWCs are only used at compile/linking time.
-James
I noticed that you list the RSL sizes in the article as 106K, 160K, and 141K for small/medium/large sizes. The SWC files (and even the swfs inside them) are significantly larger than that (library swfs are 247K, 343K, 317K, respectively). Is that because of 2.0.1 changes, or am I missing something? Are those the delta sizes (which doesn’t make sense for “small”)?
The SWFs inside SWCs are larger because they have debug and metadata which isn’t used in a normal application. For more info see:
http://www.jamesward.org/wordpress/2007/02/19/faster-flex-applications-shrink-your-rsls/
-James
I’ve been using these libraries for my flex apps for a while. The RSL’s have been working fine, but I noticed that there is a request out to the folder of wherever my main swf resides and the referrer is listed as the small RSL. It’s not causing a huge problem (of course I don’t have directory browsing turned on), but I’d like to eliminate the extra call if I can. Any ideas on what causes this?
That is pretty strange. Can you install Firebug and see what file it is trying to request? When I access the test app:
http://www.jamesward.org/testHostedFlexLibs-large-1.swf
Firebug doesn’t show any strange requests being made to http://www.jamesward.org/
-James
I discovered this problem using Charles (which I assume is like firebug). I noticed your test page didn’t have the same problem. There are two differences between what I have set up and what you have set up. The first is that my swfs are buried in my directory structure, while your are hanging out on the root of your subdomain. Also for your test, we’re hitting a swf directly, while I have my swf on a page with other stuff. I don’t know if either of these make a difference, but I’m going to try to put my RSL’s on the root.
It doesn’t seem like either of those things should make a difference. Very strange. Try to access your swf directly and see if it still makes the request.
Yeah, it still makes the request. It’s not a big enough problem to bother with for the time being. I was hoping someone might have a quick answer, but if you don’t, I don’t want you to spend too much time on it. Thanks again for your help.
Hi James,
I added framework-2_0_1_b-small and My application ran. after that I removed framework.swc from the Library Path of the new Flex library then the error happened.
Error’s detail as following:
1172: Definition mx.core:ClassFactory could not be found.
1172: Definition mx.core:DeferredInstanceFromClass could not be found.
1172: Definition mx.core:DeferredInstanceFromFunction could not be found.
1172: Definition mx.core:IDeferredInstance could not be found.
1172: Definition mx.core:IFactory could not be found.
Help me!
Thanks for!
This is totally weird… but whenever I use the above approach everything works except Label controls are blank. And only those Labels that have their ‘text’ property assigned at runtime. Go figure.
I tried compiling my own framework_small but that didn’t change a thing. It would be a shame not to use this framework RSL approach (cut my app size in half!) but I can’t use it as it is!
Hi Tuan Anh,
I don’t think you should remove the framework.swc file from the library path.
-James
Hi Peter,
You may want to consider using the framework caching feature of Flex 3 instead of my approach since it’s officially supported by the Flex team and has a better crossdomain caching mechanism. If that is not an option let me know and I’ll dig a bit further into your problem.
-James
Isnt Flex 3 still in beta? I’m pretty sure boss wont like the idea of using prerelease framework in our app. I’ll try it anyway ;)
The last and final beta of Flex 3 was released in December. It is release candidate quality with a final release coming soon. There are many people using Flex 3 in production apps today. If that doesn’t fly with the boss let me know so I can try to figure out your problem.
Hi James,
Thank for your help.
I have a problem following:
I have a program with charts and web services, but swf file’s size is large (~300K). Now I want to reduce the size to 50-100K. Can you recommend me a solution?
Another question: if I use RLS solution, does this solution speed up while loading the swf file from aspx file?
Thank you very much.
One Trackback
[...] A few days ago Metal pointed out to me in a comment on my blog that by using the SWFs inside a SWC, my RSLs are much larger than they need to be. Sure enough he was right. When you use compc to create a SWC, the SWF inside the SWC contains a lot of unnecessary stuff when used as an RSL. That stuff is necessary to create an application which uses the SWC, so don’t go ditching compc. Here is what you need to do if you want to have size optimized RSLs: [...]