Improving compile times with runtime css

This post is a video showing how embedding fonts and images can have a drastic effect on compile times.  It goes on in the video to show a possible way to improve those compile times with runtime css.

Here is the zip of the Project – SOURCE

The Problem

When you embed a lot of fonts you immediately hurt your compile times. In the video I go about showing you how just embedding a few fonts can’t hurt your compile times, I have about 8 fonts embedded and 2 of them with bold font embeddings as well. This slowed down my compile time to 8 seconds, with barely any mxml, it’s all css and embedding fonts that caused the issue. This post goes to show you how to create a separate project to hold your css and how to include it as runtime css in your original project.

A (possible) Solution

The solution is to create a separate project to hold you css and embedded assets, the reason for this is most the time in your development cycle once you are done setting up the style it just sets there… and then you work on the logic of the application…

So what you do is create a separate project put your css and the embedded assets in the seperate project, and set its output folder to be the actual project’s html-template folder, then you right-click the css file and make sure “Compile CSS to SWF” is checked. This tells flexbuilder to compile a swf just for the css file… NOTE: you may have to make a change to the css file to get it to output the swf.

Once the file is a swf, and the output folder is your destination project you simply use StyleManager.loadStyleDeclarations(‘somecss.swf’); to load your css on the “initialize” event of the main application mxml file.

To also help improve compile times you can try using unicode ranges for you font as well, and only embedding what you need Using unicode ranges for fonts

Please see the video for more details

 Here is the zip of the Project – SOURCE

THE VIDEO

(be patient, it takes a minute to load)

7 comments on this post.
  1. polyGeek:

    Very nice. I’ll use this technique the next time I have an asset intensive project.

  2. admin:

    thanks, it would probably be unnecessary to do this without fonts, fonts almost cause an immediate issue with compiling. Where it’s fairly easy just to use photoshop’s “save for web” feature and you can get a 30 – 40k image file down to 3k or 4k…

    so I really would only recommend this if you have a lot of fonts or any for that matter, because of how immediate their effect is on compile times… seems that every font you embed adds a second or two to the compile times…

    anyway, it does take a lot of images to slow down compile times, or at least quite a few decent sized ones… there are ways to separate images into another project using a Flex Library Project, but i’ll probably write about how to include images into the same separated project. I have to do some testing to see if it will work the way I think though.

    Thanks for reading

    Axel

  3. reynacho:

    This is sweet. Nice work!

  4. oyun:

    thanks, it would probably be unnecessary to do this without fonts, fonts almost cause an immediate issue with compiling. Where it’s fairly easy just to use photoshop’s “save for web” feature and you can get a 30 – 40k image file down to 3k or 4k…

    so I really would only recommend this if you have a lot of fonts or any for that matter, because of how immediate their effect is on compile times… seems that every font you embed adds a second or two to the compile times…

    anyway, it does take a lot of images to slow down compile times, or at least quite a few decent sized ones… there are ways to separate images into another project using a Flex Library Project, but i’ll probably write about how to include images into the same separated project. I have to do some testing to see if it will work the way I think though.

    Thanks for reading

  5. oyunlar:

    This is sweet. Nice work!

  6. jason:

    Thanks for your post – this drastically cut down my compile time on a large project. I was constantly waiting a minute or more and now it’s down to just a few seconds.

    Two things I noticed – first, you don’t have to split the style sheet into a separate project, you can leave it in, just remove all mxml inline tags that reference it and use StyleManager instead. second, if you do make changes to the stylesheet, you have to clean your project in order for the changes to take effect.

    Nice work finding and posting – this is a huge, huge time-saver for me.

  7. business for life:

    Incredible post person, maintain inside the very very good function.

Leave a comment