Оптимизация Flex при использовании нескольких модулей

У меня есть приложение Flex, в котором время загрузки чрезвычайно важно (сайт потребителя). Я хочу иметь возможность выводить что-то на экран, а затем разрешать загрузку дополнительных модулей по мере необходимости.

Проблема, с которой я столкнулся, заключается в том, что общая сумма всех модулей намного больше, чем если бы я включил все компоненты в один файл .swf.

Совершенно очевидно, почему. Например, классы, необходимые для доступа к веб-службам, занимают около 100 КБ. Если я не использую эти классы в своем main.swf, они будут включены в КАЖДЫЙ модуль, который их использует. Так что, если у меня есть 5 модулей, это лишние 500 КБ потрачены впустую.

По идее хочу 3 уровня

main.swf - минимально возможный тип макета / стиля / шрифта / фреймворка common.swf - дополнительные классы, необходимые модулю 1 + модуль 2 (например, веб-сервисы) module1.swf - модуль 1 на сайте module2.swf - модуль 2 на сайте

Не знаю, возможно ли это вообще.

Мне интересно, могу ли я загружать файлы swz / swf для частей фреймворка, а не для всего фреймворка.

Мне действительно нужно уменьшить размер основного приложения до 200 КБ. Когда я добавляю веб-службы и базовые функции DataGrid, он увеличивается до 450 КБ.

Будем признательны за любые извлеченные уроки.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
0
4 839
4

Ответы 4

Вы можете изучить класс ModuleLoader, возможно, вы сможете загрузить свои основные данные в первые 200 Кбайт, а затем загрузить остальные, когда и если это необходимо.

Также стоит помнить, что любые SWC, которые вы используете, встраиваются во время компиляции, тогда как любые SWF загружаются во время выполнения.

Когда дело доходит до размера файла, Flex - немного свинья. На самом деле есть только один способ уменьшить размеры вашего приложения - использовать внешний swz для фреймворка. Есть статья Adobe Devnet о Повышение производительности приложения Flex с помощью кеша Flash Player, которую я рекомендую вам прочитать.

В проекте, над которым я работал, у нас были проблемы с нашим модулем предварительной загрузки, который засасывал классы, которые нам не нужны. Что нам нужно было сделать, так это создать интерфейсы для классов, которые находятся в других модулях, и ссылаться на них таким образом. Когда модуль загружен, мы просто присвоили ссылку на IApplicationModule, чтобы вызвать наш код инициализации.

Также подумайте о том, чтобы поместить свои классы в отдельный SWF-файл, а затем использовать ApplicationDomain для получения доступа к классам.

(этот код взят из это сообщение на форуме, который объясняет, как получить доступ к классам, загруженным из модулей в 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);  
   }
}

В компиляторе командной строки есть опция для исключения определений классов, которые уже скомпилированы в другой swf. Это работает так:

  1. Скомпилируйте основное приложение (которое содержит загрузчик) и выберите создание отчета.
  2. Скомпилируйте модуль и выберите исключение классов из приведенного выше отчета.

Я знаю, что это было некоторое время назад, но я подумал, что отправлю еще один ответ на случай, если кто-то все еще ищет ответ по этому поводу.

Я искал оптимизацию приложений Flex и, после некоторой проверки, решил использовать модули. В первую очередь потому, что у них есть такие хорошие возможности для оптимизации.

Вам понадобятся две команды mxmlc:

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

и

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

Мой внешний swf (с использованием Flex Framework) теперь составляет всего 21 КБ. Он делает много (пока), но даже если он делает все больше и больше, он будет продолжать использовать ресурсы из основного кода приложения.

Вот командный файл, который я создал для ускорения процесса (вы должны поместить mxmlc в переменную пути к среде, чтобы он работал так. Панель управления -> Система -> Дополнительно -> Переменные среды, отредактируйте системную переменную пути, добавив путь к вашему mxmlc (требуется перезагрузка)):

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

Больше информации здесь: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_4.html

Надеюсь, это поможет!

Если вы делаете это в конструкторе Flex / Flash, MyAppReport.xml следует поместить в корень папки проекта модуля, то есть в ту же папку, что и Module.mxml. Хороший ответ, кстати

Drenai 12.01.2011 18:57

Другие вопросы по теме