Напишите впереди
Недавно я наткнулся на некоторую загрузку контента в угловой модульной упаковке на работе. Я чувствовал, что у меня есть некоторые подводные камни в середине, поэтому я отметил это здесь.
Фон проекта:
Проект в основном использует AngularJS в качестве передней структуры. Когда проект был выпущен ранее, все фронтальные сценарии будут упакованы и сжаты в файл. Он будет загружен, когда страница будет впервые доступна, что приведет к медленной начальной загрузке страницы. Исходя из этого, предлагается загружать спрос, то есть сценарии модуля будут загружены только тогда, когда пользователь обращается к определенному модулю.
Инструменты:
Проект использует Grunt упаковку в соответствии со спецификациями AMD, использует Grunt-Contrib-Requirejs для сжатия и слияния модулей и использует oclazyload для завершения ленивой загрузки углового модуля.
Процесс проекта:
Модульная упаковка
Код в проекте в основном записан в соответствии с спецификацией AMD, и Grunt-Contrib-RequireJS используется для сжатия каждого модуля в файл JS.
Вопрос 1: В коде проекта каждый модуль будет полагаться на сторонние библиотеки/государственные услуги в проекте/публичных инструкциях в проекте. Если эта часть контента не обрабатывается, Grunt-Contrib-RequireJS будет загружать все модули, от которых это зависит при сжатии каждого модуля, а затем сжимает его в один и тот же файл JS.
Ответ: Сжатие сторонней библиотеки/общественных служб и инструкций в три модуля, а затем удалите ее, используя «исключить» из сценария упаковки каждого модуля. Как показано на рисунке ниже:
Следует отметить, что имя модуля общественного модуля должно иметь файл JS с тем же именем под соответствующим путем.
Нагрузка на спрос
После упаковки сценария в файлы JS с помощью модуля следующим шагом является загрузка различных модулей в соответствии с запросами пользователя. Проект использует пользовательский маршрутизатор для обработки прыжков маршрутизации. Вы можете начать с маршрута, чтобы завершить ленивую загрузку модулей.
Конкретный метод: когда пользователь управляет прыжком с маршрутом, модуль, к которому принадлежит пользователь, загружается в соответствии с состоянием, к которому пользователь хочет прыгнуть. На основании этого необходимо добавить отображение между состоянием и модулем. В начале необходимо загрузить его с помощью требований. Установлено, что сценарий может быть загружен, но контроллеры/службы/фильтры, зарегистрированные в угловых, не работают. Расследование показало, что такие услуги, как контроллеры, зарегистрированные Angular после вызова метода начальной загрузки, больше не будут вызоваться. Основываясь на этом, для загрузки вводится Oclazyload (oclazyload имеет некоторые инъекции и модификации в угловом исходном коде).
До сих пор загрузка спроса была в основном реализована, но есть еще несколько проблем:
Зависимости проекта между модулями
Поскольку между некоторыми модулями существуют сильные зависимости между проектами, обработка состоит в том, чтобы добавить зависимости между модулями в файле конфигурации. Перед загрузкой модуля проверьте, имеет ли он зависимый модуль. Если это так, зависимый модуль будет загружен первым. После загрузки зависимого модуля текущий модуль будет загружен.
Ленивая загрузка инструкций;
В угловом, $ compil может использоваться для реализации взаимозависимости между инструкциями. Обработка этого заключается в настройке имени инструкции и зависимости модуля инструкции. Когда используется определенная инструкция, сначала загружается модуль, а затем выполняется метод компиляции. Это решение может решить большинство зависимостей для инструкций.
Расположение инструкций. Большинство проектов используют длинные страницы, каждая длинная страница разделена на несколько областей, и каждая область является командой. При использовании перехвата будет проблема, то есть время загрузки каждой инструкции отличается. Команды, которые возвращаются первыми, будут сначала добавить к DOM, что приведет к неопределенности в макете страницы. Решение состоит в том, чтобы использовать механизм Deffer, и после того, как все инструкции загружаются/скомпилированы, добавьте выполнение в дерево DOM.
Зависимости между директивами: существуют также зависимости проекта между директивами. Решение этого состоит в том, чтобы объединить взаимозависимые инструкции в модуль и упаковать их в один и тот же файл сценария. Это решение может решить большую часть зависимостей инструкций, но не может решить зависимости в процессе инициализации. Там может быть определенная инструкция, и зависимости от инструкции еще не были составлены. Для такого супер -особенного примера только сценарий и шаблон загружаются при инициативе страницы.
Вышеуказанное - проблемы, возникающие на протяжении всего процесса проекта. По сути, каждый раз, когда вы идете вперед, вы боретесь с ямой. Многие вещи - это первый раз, когда вы вступаете в контакт с ними, и я чувствую, что что -то узнал. Решения многих проблем могут быть не очень ясными. Другие столкнулись со всеми вышеперечисленными проблемами. Пока вы хорошо используете поисковую систему и сами читаете/понимаете код других людей, все проблемы могут быть успешно решены.
Некоторые подводные камни об угловой ленивой загрузке - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.