Reduzieren der Dateigröße eine Flex-SWFs
/ Autor: Alexander, 20 Feb 2009Flex-SWFs wachsen gerade bei komplexen Anwendungen oft zu relative großen Dateien an. Größen über 2 MegaByte sind keine Seltenheit. Daraus resultieren größere Ladezeiten für den User und die Gefahr, dass dieser, wenn diese Zeit zu lang wird, den Download abbricht und die Seite und deren Inhalt nie ansehen wird. Jedoch gibt es einige Einstellungen für den Compiler und Möglichkeiten der geladenen Asstes zu reduzieren.
Fangen wir zunächst mit den Compilereinstellungen an:
mxmlc -optimize=true MyApp.mxml
Dieser Ausdruck weist den Compiler an die Dateigröße zu optimieren, indem redundanter Bytecode entfernt wird.
mxmlc -debug=false MyApp.mxml
Durch diese Einstellung werden alle Zeilennummern oder Navigationsinformationen aus dem SWF entfernt, die eigentlich nur während der Entwicklung notwendig sind. Auch dieser Schritt reduziert die Dateigröße um einen großen Schritt.
mxmlc -strict=true MyApp.mxml
Hier verifiziert der Compiler alle Definitionen und Packages innerhalb der import-Statements. Werden Klassen nicht benötigt wirft der Compiler einen Fehler und die Klassen können entfernt werden. Des weiteren wird somit während des compilierens eine Typprüfung durchgeführt, was die Dateigröße wiederum etwas reduziert.
mxmlc -link-report=true MyApp.mxml
Diese Einstellung erstellt eine Zusammenfassung im XML-Format welche Verlinkungen verwendet werden. Somit lässt sich untersuchen welche Verknüpfungen vorhanden sind und daraus schließen ob diese auch wirklich benötigt werden. Während der Codeentwicklung ist es üblich Referenzen auf Klassen zu erstellen, die dann später doch nicht verwendet werden. Diese können mit dieser Zusammenfassung erkannt und entfernt werden.
Auch im Code lassen sich Vorkehrungen treffen um die Dateigröße zu reduzieren. Eine davon ist die Typprüfung mit der getQualifiedClassName() Methode. Prüft man zu Laufzeit ab ob ein Child zum Beispiel ein Button ist wird dies mit einen is-Vergleich durchgeführt.
var isAButton:Boolean = child is mx.controls.Button;
Durch diese Anweisung wird der Compiler dazu gebracht die Buttonklasse in das SWF zu integrieren, auch wenn diese gar nicht benötigt wird. Mit der getQualifiedClassName()-Methode lässt sich der selbe Vergleich bewerkstelligen, ohne jedoch die Vergleichsklasse zu laden.
Die Methode liefert einen String zurück, welche mit dem Namen einer Klasse verglichen werden kann.
var className:String = getQualifiedClassName(child);
var isAButton:Boolean = className == "mx.controls::Button";
Des weiteren muss man überlegen ob wirklich alle Assets von Anfang an in die Anwendung geladen werden müssen, oder nicht doch zur Laufzeit hinzugefügt werden. Dies lässt dich über die Modularisierung des Projektes, run-time stylesheets, RSLs oder eben über das Laden der Assets zur Laufzeit und nicht über das Einbetten dieser, bewerkstelligen. Jedoch ist hier zu überlegen, ob wirklich immer eine Ersparnis vorliegt, denn letztendlich müssen die Daten sowieso geladen werden, die Frage ist wann. Auf jeden Fall ist mit dieser Methode das SWF kleiner und wird schneller geladen.
Ein großer Teil der Größe einer Anwendung sind immer die verwendeten Schriften. Ein komplett eingebetteter Zeichensatz kann mehrere tausend Zeichen enthalten, auch solche die garantiert nie verwendet werden. Entwickler die aus der Flash-Ecke kommen, kennen die Möglichkeit die eingebetteten Zeichen zu reduzieren. Genau dies lässt sich auch im CSS der Applikation umsetzen. Hier wird über den @font-face die Schrift eingebettet. Über das Attribut unicodeRange lässt sich nun bestimmen welche Zeichen der Schriftart zur Anwendung hinzugefügt werden.
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+002E-U+002E; /* Period [.] */
}
Ein weiterer Punkt wo die eingebetteten Zeichen bestimmt werden können ist die flex-config.xml, mittels dem <language-range> Tag.
<language-range>
<lang>Latin I</lang>
<range>U+0020,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183</range>
</language-range>
Durch diese Einstellungen lässt sich doch einiges an der Dateigröße des SWF machen und letztendlich viele der unnötig geladenen Daten herausfiltern.
Leave a Reply