Size: a a a

Angular - русскоговорящее сообщество

2020 May 03

Вキ

Вертихвост キバ 🏡🦊... in Angular - русскоговорящее сообщество
Alex Orlovsky
поправьте, если ошибаюсь, пожалуйста. может, я вообще не так понял, как вы предлагаете делить на папочки)
На мой взгляд, самое важное — это время загрузки первого экрана. Это можно достичь просто разбив приложение на lazy modules, как вы уже делаете сейчас.

Когда приложение уже запущено и что-то отображает, то не так важно, сколько будет весить дополнительный чанк, потому что хорошей практикой будет этот чанк предзагрузить до того, как он понадобился. Иначе пользователю придется ждать, пока необходимые модули загрузятся. А так как это происходит по сети, то не особо важно на 10кб меньше или больше придется загружать — лаг все равно будет.

Если хочется попрофилировать зависимости, которые попадают в основной бандл и другие чанки, то можно воспользоваться этими тулзами:
https://angular.io/guide/deployment#inspect-the-bundles
https://www.npmjs.com/package/webpack-bundle-analyzer (не забудьте добавить флаг ng build --stats-json при сборке)
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
Степан
Скиньте уже структуру кто то :) а то все вокруг до около ходим
.
└── src
   ├── modules
   │   ├── auth
   │   │   ├── auth.guard.ts
   │   │   ├── auth.interceptor.ts
   │   │   ├── auth.module.ts
   │   │   └── auth.service.ts
   │   └── user
   │       ├── user.component.html
   │       ├── user.component.scss
   │       ├── user.component.ts
   │       ├── user.directive.ts
   │       ├── user.module.ts
   │       ├── user.pipe.ts
   │       └── user.service.ts
   └── pages
       ├── login
       │   ├── login.component.html
       │   ├── login.component.scss
       │   ├── login.component.ts
       │   └── login.module.ts
       ├── logout
       │   ├── logout.component.html
       │   ├── logout.component.scss
       │   ├── logout.component.ts
       │   └── logout.module.ts
       └── settings
           ├── settings.component.html
           ├── settings.component.scss
           ├── settings.component.ts
           └── settings.module.ts


login и logout импортируют auth, и используют оттуда только сервис, чтобы выполнять действия
settings тоже импортирует auth, но использует только гард, чтобы пускать только залогиненного юзера. также settings импортирует user и использует его компонент, чтобы вывести информацию о юзере

как-то так примерно. я прав?
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
Вертихвост キバ 🏡🦊
На мой взгляд, самое важное — это время загрузки первого экрана. Это можно достичь просто разбив приложение на lazy modules, как вы уже делаете сейчас.

Когда приложение уже запущено и что-то отображает, то не так важно, сколько будет весить дополнительный чанк, потому что хорошей практикой будет этот чанк предзагрузить до того, как он понадобился. Иначе пользователю придется ждать, пока необходимые модули загрузятся. А так как это происходит по сети, то не особо важно на 10кб меньше или больше придется загружать — лаг все равно будет.

Если хочется попрофилировать зависимости, которые попадают в основной бандл и другие чанки, то можно воспользоваться этими тулзами:
https://angular.io/guide/deployment#inspect-the-bundles
https://www.npmjs.com/package/webpack-bundle-analyzer (не забудьте добавить флаг ng build --stats-json при сборке)
спасибо большое. юзаю webpack-bundle-analyzer, хорошая штука

а по структуре я правильно понял? предыдущее сообщение
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
я там пропустил папку app и не делал routing модули, но не суть)
источник

Вキ

Вертихвост キバ 🏡🦊... in Angular - русскоговорящее сообщество
Alex Orlovsky
спасибо большое. юзаю webpack-bundle-analyzer, хорошая штука

а по структуре я правильно понял? предыдущее сообщение
Да, в целом норм
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Alex Orlovsky
.
└── src
   ├── modules
   │   ├── auth
   │   │   ├── auth.guard.ts
   │   │   ├── auth.interceptor.ts
   │   │   ├── auth.module.ts
   │   │   └── auth.service.ts
   │   └── user
   │       ├── user.component.html
   │       ├── user.component.scss
   │       ├── user.component.ts
   │       ├── user.directive.ts
   │       ├── user.module.ts
   │       ├── user.pipe.ts
   │       └── user.service.ts
   └── pages
       ├── login
       │   ├── login.component.html
       │   ├── login.component.scss
       │   ├── login.component.ts
       │   └── login.module.ts
       ├── logout
       │   ├── logout.component.html
       │   ├── logout.component.scss
       │   ├── logout.component.ts
       │   └── logout.module.ts
       └── settings
           ├── settings.component.html
           ├── settings.component.scss
           ├── settings.component.ts
           └── settings.module.ts


login и logout импортируют auth, и используют оттуда только сервис, чтобы выполнять действия
settings тоже импортирует auth, но использует только гард, чтобы пускать только залогиненного юзера. также settings импортирует user и использует его компонент, чтобы вывести информацию о юзере

как-то так примерно. я прав?
Всё хорошо ток вот забрать pages modules
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
Let me take you into the light
Всё хорошо ток вот забрать pages modules
зачем?
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Alex Orlovsky
зачем?
А зачем они?
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
Let me take you into the light
А зачем они?
чтобы структура легко сканировалась глазами, а не прям всё в куче. хоть минимальное разделение на features и pages
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Alex Orlovsky
чтобы структура легко сканировалась глазами, а не прям всё в куче. хоть минимальное разделение на features и pages
А теперь представь что их нет, и что измениться ?
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Я также быстро нахожу всё что нужно
источник

O

Oleg in Angular - русскоговорящее сообщество
Ребята, всем привет, подскажите, пожалуйста, почему не отрабатывает пайп у возвращаемого observable?
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Oleg
Ребята, всем привет, подскажите, пожалуйста, почему не отрабатывает пайп у возвращаемого observable?
delay(500) судя с контекста
источник

NS

Nikita Sologub in Angular - русскоговорящее сообщество
Alex Orlovsky
спасибо большое. юзаю webpack-bundle-analyzer, хорошая штука

а по структуре я правильно понял? предыдущее сообщение
Стивен флюин советовал вместо webpack-bundle-analyzer использовать source-map-explorer
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
Let me take you into the light
А теперь представь что их нет, и что измениться ?
будет не ясно, какой из модулей представляет из себя страницу и содержит роутинг. я так-то в любой структуре в своём приложении быстро ориентируюсь, потому что помню наизусть. но посадите нового человека, и как быстро он разберётся в общей куче модулей? если у человека стоит задача "пофикси то-то на такой-то странице". ему будет проще, если искать страницу нужно будет только в pages
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Alex Orlovsky
будет не ясно, какой из модулей представляет из себя страницу и содержит роутинг. я так-то в любой структуре в своём приложении быстро ориентируюсь, потому что помню наизусть. но посадите нового человека, и как быстро он разберётся в общей куче модулей? если у человека стоит задача "пофикси то-то на такой-то странице". ему будет проще, если искать страницу нужно будет только в pages
У вас задача заводиться контекстно? По страницу по модулю
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Задачу заводит рандомный куа какой не шарит вашу архиектуру
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
И скорее всего он в баге напишет сраницу а не фичу
источник

AO

Alex Orlovsky in Angular - русскоговорящее сообщество
Let me take you into the light
И скорее всего он в баге напишет сраницу а не фичу
вот именно. и я ж о чём. в задаче будет говориться про "страницу", поэтому и искать нужный модуль легче в папке "страницы"
источник

L

Let me take you into... in Angular - русскоговорящее сообщество
Alex Orlovsky
вот именно. и я ж о чём. в задаче будет говориться про "страницу", поэтому и искать нужный модуль легче в папке "страницы"
У меня такое чуство, что у вас имена фичи и пейджы совпадают
источник