Para usuários que possuem uma internet veloz carregar uns 500 ou 600kbs a cada vez que acessam uma aplicação pode não fazer muita diferença, mas quando sua conexão está na casa dos 300kbps qualquer kb pode fazer a diferença. Aplicações que demoram para ser carregadas é um convite para seu usuário odiar seu sistema.
Ao contrário que muita gente pensa, uma aplicação Flash ou Flex podem ser bem leves em relação ao número de kbytes. No mundo Flash websites pesados normalmente são caracterizados por recursos embutidos, como fontes, imagens, aúdio e videos. O código, em si, difcilmente passará dos 100kb. Além de ser uma boa prática dividir seu website flash em diversos swf’s o que diminiui mais ainda o carregamento inicial.
Mas o que ocorre com as aplicações Flex, que inicialmente sempre ultrapassam os 250 kb’s? Quando acessamos aplicações como Adobe Buzzword ou Adobe Kuller percebemos como carregam rápido. O que muita gente não sabe é sobre o recurso de framework caching( ou persistent cache), na minha opnião a melhor coisa diposnível no Flex 3.
Sempre acesso as aplicações que divulgam nas listas de discussão sobre Flex e quase nunca observamos este recurso implementado. Muitas aplicações podem tirar proveito deste recurso simples de implementar, principalmente as aplicações públicas na web.
Todas essa aplicações mencionadas acima utilizam este recurso, e isso é o que garante que sua aplicação seja tão pequena ou menor que um website em flash ou html com ajax.
Apartir do Flash Player 9.0.47 é possível distribuir a framework do Flex separadamente de seu swf, o que permite que este arquivo (framework.swz) possa ser armazenado em um cache específico do Flash Player e não do browser. Isso garante que sua aplicação carregue quase instântaneamente mesmo que o usuário limpe o cache ou mude de navegador.
Agora vamos para a prática e ver como diminuir o tamanho de seu aplicativo Flex.
Vamos criar um novo projeto Flex que possua apenas um VBox com um botão, um label e um datagrid.
Ao compilar este projeto temos um swf com o total de 243 KB. Agora precisamos diminuir este valor, clique com o botão direito sobre a pasta principal de seu projeto no Flex Builder e selecione “properties”.
Na tela de propriedades do projeto acesse “Flex Build Path” e em seguida acesse a aba “Library Path”. Dentro do item “Flex 3” econtram-se todos os componentes do framework. Selecione o item “framework.swc”.
Percebam as palavras “Merged into code” no link type deste componente, isto indica que teremos o framework embutido em nosso swf. Exatamente esse o comportamento que queremos evitar. Selecione o combo Framework Linkage no topo da tela e alter seu valor para “Runtime Shared Library”
Estamos dizendo que nosso framework se aproveitará do recurso de RSL’s para comportilhar este componente (o framework) entre outras aplicações e como esta rsl (framework.swz) será cacheado na máquina do usuário, ele estará disponível para todas as aplicações.
Agora basta compilar e checar o novo tamanho de seu swf. Agora temos miseros 70kbs. Perceba os arquivos framework.xxx.swz e framework.xxx.swf , o arquivo .swf permite que mesmo as pessoas que não possuam o Flash Player que suporte o caching possa acessar sua aplicação.
Agora vamos exportar a versão final para reduzir um pouco mais, acesse o menu “Project/Export Release Build”. Veja na pasta bin-release, que agora nosso swf sem as funcionalidades de debug possui apenas 50kb.
Considerações finais: Durante a primeira visita ao seu sistema o usuário terá que baixar os 500kb dos framework e depois a cada vez que acessar sua aplicação ou qualquer outra que utilize framework caching só será necessário baixar o pequeno swf de seu sistema. Para usuários sem suporte a este recurso (player inferior ao 9.0.47) a cada vez que acessar seu sistema serão baixados os 500kb do framework.swf e mais os swf’s de sua aplicação. Neste caso, ao invés de diminuir o tamanho, teremos um aumenta. Aconselho sempre utilizar o express-install em seu html-wrapper.
Para saber mais RSLS e Framework Caching acesse:
RSLS
Artigo no devnet
Post de Ted Patrick sobre caching
PARA MAIS INFORMAÇÕES INTERESSANTES SOBRE FLEX ACESSE: curso flex
27 Comentários to “Flex 3 Framework Caching”
Velo diz:
05/04/2008 em 12:39 PM
Fera,
Me conta uma coisa. Como ficou o uso de memória?
VELO
daniel lopes diz:
05/04/2008 em 01:56 PM
Olá Velo, não muda muito em relação ao uso de memória pois o que estava sendo carregado junto com seu swf agora é carregado do computador, diminuindo o tamanho da requisição http quando acessa o site pela segunda vez. Quanto a tamanho em disco apenas o framework assinado pela adobe será gravado no cache, o que garante segurança e também o arquivo gravado no cache não irá mudar de tamanho. Mas claro quando um usuário acessar um site pela primeira vez sem ter o framework no cache vai ser um experiência não agradavel pois serão duas requisições http sendo uma de aproximadamente 500kb, mas vale lembrar que sites este download de 500kb não será mais necessário para nenhum outro site que utilize o caching.
Erko Bridee diz:
05/04/2008 em 04:35 PM
Opa, cara muito boa essa dica ;)
>> vamos todos utilizar esse recurso \o/
Daniel Lopes diz:
05/04/2008 em 06:02 PM
Obrigado Erko, vamos fazer o possível para sempre atualizar o blog com conteúdo de qualidade. ;D
Mário Júnior diz:
05/04/2008 em 11:37 PM
Relamente uma informação muito útil... parabéns!!! =D
Léo Simas diz:
07/04/2008 em 03:31 PM
Ótimo artigo, mas no meu caso, o swf ficou vazio sem nada dentro. Coloquei os arquivos framework.xxx.swz e framework.xxx.swf no diretório bin-release e nem assim funcionou.
Falowzzzzzzzzzzzz
Jean diz:
28/04/2008 em 02:21 PM
Olá. Você saberia me dizer como fica, caso eu mude minha versão do Flex? Instalar o Flex4 quando sair. Ele simplesmente carrega os novos arquivos ou terá que ser feita algum tipo de limpeza de cache?
Obrigado!
Daniel diz:
29/04/2008 em 05:46 PM
@Léo Simas : Preciso saber como você fez para ver o que pode estar errado.
@Jean : Realmente este é o tipo de informação que não da para saber antes de nova versão sair, provavelmente seu player irá usar a ultima versão framework cacheada na máquina.
Ved diz:
07/05/2008 em 10:53 AM
Fantástica a sua dica, principalmente para aplicações pequenas! Vou postar o link no meu blog!
Abração do Ved
Patric diz:
11/05/2008 em 07:47 PM
Eu não conseguir deixar o arquivo em apenas 50kb !?
Por que será ? Eu fiz da seguinte maneira. Project > Export Release Build > Finish. Depois. Botão da direita em cima do arquivo "main.mxml" > properties. E continua com 713 bytes...
daniel lopes diz:
13/05/2008 em 06:27 PM
@Patric, export release build apenas remove as funcionalidades para debug e profiling o que reduz um pouco mas para fazer com seu arquivo diminua mais ainda precisa usar o recurso de framework caching também ensinado acima. Você também não deve olhar o tamanho do seu mxml mas sim o tamanho do swf, o tamanho em byte do mxml nada influi no tamanho final do swf. Abraços.
willians diz:
19/05/2008 em 10:56 AM
adoramos a dica, mas o meu swf sozinho ficou sem itens nenhum, reduziu para 51k mas agora nao tem nada dentro… help-us
daniel lopes diz:
20/05/2008 em 12:19 PM
@Wilians, se ver o que foi feito fica dificil dizer o que está errado, se tiver como me enviar um email com o projeto posso tentar te ajudar. Mande um email no form de contato do site que te respondo passando meu email.
Abraços.
junico diz:
23/05/2008 em 11:15 AM
tem como eu criar um swc proprio e transforma-lo numa rsl que fique cacheada no player, igual ao framework.swz? pois assim eu poderia soh criar o application no swf e entao colocar todo o resto dentro da rsl. acredito que assim o usuario não faria mais download da minha applicação, somente o swf que starta a rsl que está no cache…
obrigado
junico
daniel lopes diz:
23/05/2008 em 11:25 AM
@junico, isso não é possível, desta forma a rsl será cacheada no browser, arquivos não assinados pela adobe não podem ser cacheados na pasta do player.
junico diz:
23/05/2008 em 12:35 PM
mas se ele ficar no cache do browser tambem vai diminuir o tempo de download correto?
mas se ficar no browser será que quando eu fazer deploy de uma atualização da rsl ele vai jogar fora a ultima e baixar a nova?
abraço
daniel lopes diz:
23/05/2008 em 12:57 PM
Na minha opnião isso não é muita vantagem pois seu swf da aplicação também vai para o cache do browser, o ideal de usar rsls é para compartilhar coisas entre aplicações. Se for apenas para fazer cache no browser não compensa muito. Também é importante lembra que o cache do browser só vai durar enquanto tiver espeço ou quando o usuário não limpa-lo. Quando ao browser substituir o que está no cache existe muita coisa em jogo. Depende de como está o header expires da sua requisição, mas normalmente apenas mudando a versão do arquivo no server ele já vai ser baixado. Se assim não funcionar vc pode criar um número de verão e associalo ao nome do swf da sua app.
junico diz:
23/05/2008 em 03:05 PM
beleza daniel muito obrigado pela sua ajuda valeu
Pamela diz:
24/07/2008 em 07:49 PM
Oi ! eu fiz um site inteiro no adobe flex 3 builder, mas nao achei nenhum site de web host que suporta o formato mxml do adobe felx3 … voce sabe me ajudar? Por favor estou desesperada!
panlala87@hotmail.com
Obrigada
Daniel Lopes diz:
25/07/2008 em 03:01 PM
Olá Pamela, você não tem que hospedar o mxml, o Flex3 não funciona assim, você precisa gerar os swfs, os mxmls são apenas uma linguagem de marcação para ajudar a montar interfaces e escrever telas que depois será transformado em AS3 e compilado para o bytecode do FlashPlayer.
Apenas compile seu projeto, qualquer host tem suporte. :D
Mirla Braga diz:
11/12/2008 em 08:33 AM
Olá Daniel,
Bom artigo. Tem como eu criar os arquivos compilados
da aplicação separados do swf da API através de parâmetros
do compilador flex? Ou seja, através da linha de comando
gerar os arquivos framework.xxx.swz e framework.xxx.swf
e os arquivos de minha aplicação ?
Até.
Daniel Lopes diz:
12/12/2008 em 09:16 AM
@Mirla: Tem jeito sim , seria mais ou menos isso:
mxmlc main.xmml -runtime-shared-library-path=c:\flex_sdk_3_beta3\frameworks\libs\framework.swc,framework_3.0.0.477.swz,,framework_3.0.0.477.swf -runtime-shared-library-path= c:\flex_sdk_3_beta3\frameworks\libs\rpc.swc,rpc_3.0.0.477.swz,,rpc_30.189225.swf
Você também pode gerar os arquivos pelo ANT
Mirla Braga diz:
12/12/2008 em 02:37 PM
Olá Daniel,
Obrigada, funcionou direitinho, eu utilizei o Maven para realizar a
tarefa.
Agora tenho outra dúvida, é possível criar um swf assinado de maneira
que alguns dos arquivos da minha aplicação fiquem no disco da
máquina do cliente ? Ou somente a Adobe pode fazer swf’s assinados,
como o arquivo framework ?
Até
Daniel Lopes diz:
13/12/2008 em 08:33 AM
Somente a adobe
Éberson diz:
17/06/2009 em 04:25 PM
Olá Daniel,
Vi que vc citou que essa tarefa pode ser feita pelo ant… gostaria que me ajudasse a descobrir o erro no meu codigo:
<project> <property /> <property /> <property /> <property /> <property /> <property /> <target> <mxmlc file=”${MAIN_SOURCE_FOLDER}/dashboard.mxml” context-root=”/gix_web” output=”${OUTPUT_FOLDER}/dashboard.swf” services=”${WEB_HOME}/WEB-INF/flex/services-config.xml” keep-generated-actionscript=”true” optimize=”true” static-rsls=”false”> <load-config /> <runtime-shared-library-path> <url /> <url /> </runtime-shared-library-path> <runtime-shared-library-path> <url /> <url /> </runtime-shared-library-path> <source-path /> <source-path /> <compiler> <include /> <include /> </compiler> </mxmlc> </target> </project>o swf é gerado mas as lib’s não.. não sei o que está errado… pode me ajudar?
daniel lopes diz:
18/06/2009 em 11:47 AM
Olá Éberson, infelizmente não tenho o ant nesta máquina e já não trabalho com ele tem um tempinho… procura no site da Adobe (http://www.adobe.com/devnet/flex/) que tem um artigo que detalha isto lá.
Adriano diz:
16/09/2009 em 03:33 PM
Olá Daniel fiz exatamente os passos que você descreveu mais não funcionou. Ele não carrega os arquivos está dando o seguinte erro: ArgumentError: Error #1063: Incompatibilidade de contagem do argumento mx.core::CrossDomainRSLItem(). Esperado 5, obtido 6. at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::initialize()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:1825] at mx.managers::SystemManager/initHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2904]
Vod~e poderia me ajudar
Comentário
CATEGORIAS
HomeDesign
SEO
Empreendimento
Cifras
Ruby e Rails
Flex
Photoshop
Flash
XHTML/CSS
JavaScript
Variados
Database
Firefox
Projetos
3D
Projetos
TextMate
Smalltalk
Mac
Livros
ARQUIVO
03/2010 (2)02/2010 (7)
01/2009 (4)
12/2009 (7)
11/2009 (4)
10/2009 (10)
09/2009 (7)
08/2009 (6)
07/2009 (12)
06/2009 (5)
05/2009 (6)
04/2009 (9)
03/2009 (14)
02/2009 (18)
01/2009 (14)
12/2008 (20)
11/2008 (18)
10/2008 (9)
09/2008 (12)
08/2008 (6)
07/2008 (12)
06/2008 (10)
05/2008 (15)
04/2008 (19)
GAIA, o maior amigo do programador Flash
comentado por criação de sites
Seja produtivo consumindo tomates
comentado por Gabriel Sobrinho
Cifras: novas funcionalidades
comentado por Juarez P. A. Filho
Cifras: novas funcionalidades
comentado por Mário Santos
Ganhador da promoção
comentado por Juarez P. A. Filho