var_bin Jan 11 2018 at 19:03

AngularJS + Webpack = lazyLoad

6 min

12K

Website development*JavaScript*Client optimization*Angular*

Tutorial

+16

Comments 8

PaulMaly Jan 11 2018 at 19:24

Так с чем связана ошибка при простом использовании require.ensure с Angular? Много раз его использовал с другими фреймворками и ни разу не сталкивался.

var_bin Jan 11 2018 at 19:48

Если в кратце, то вся проблема в сервисе $injector. Учитывая как webpack обрабатывает require.ensure, $injector в свою очередь не находит сам модуль для которого мы применяем require.ensure. ocLazyLoad берет решение этой проблемы на себя.

PaulMaly Jan 11 2018 at 21:05

Понятно, я так и понял, что это специфичная для Angular проблема. require.ensure не всегда удобен, так как можно легко сломать статический анализатор Webpack, когда его используешь. Спасибо за разъяснение.

Focushift Jan 11 2018 at 19:47

Можно ли таким образом завернуть сервисы?

var_bin Jan 11 2018 at 19:50

В принципе, данный подход можно использовать и для сервисов и для контроллеров. В документации к ocLazyLoad есть примеры

var_bin Jan 11 2018 at 19:48

amalitsky Apr 19 2018 at 03:21

Большое спасибо! Очень круто что про 1.х ещё пишут, у нас он отлично работает и перебираться пока не собираемся. Перевожу сборку на webpack сейчас, поделитесь ссылками если есть (на английском ок).

var_bin Apr 19 2018 at 10:30

Добрый день, Александр!

Если переходите на webpack + AngularJS 1.x, то я бы вам советовал попробовать FountainJS. Он работатет по типу Angular CLI. Очень круто позволяет оптимизировать процесс разработки и убрать ненужные действия. Подумайте о том, чтобы начать использовать TypeScript, если еще не используете :). Ссылок как таковых нет, документация webpack покрывает примерно 80% всех вопросов. Остальное гуглиться достаточно просто. Плюс можно задавать вопросы в их чате, только вот с ответами может быть запара). Хочу заметить, не ждите великой магии от Tree Shaking, если будете транспайлить код в ES5. На хабре было пару статей на эту тему (раз, два), которые хорошо описывают причины такого поведения.

и перебираться пока не собираемся

А вот это вы зря :) Нужно подумать о переходе на новую версию, потому как команда Angular этим летом выпускает стабильную версию AngularJS 1.7 и еще 3 года long-term поддержки. При этом они не будут принимать PR, issue или еще что-то там (: Пруфф

P.S. Я все новые проекты сейчас пишу на последней стабильной версии Angular и стараюсь всем клиентам объснять необходимость миграции на новую версию.

Show the best of all time