DEV.NVX.ME

Angular & TypeScript

Анализ и оптимизация бандла Angular 5 приложения

| версия Angular: 5
ng5-stats-json.jpg

Если у вас средний или большой проект, а также много сторонних компонентов, то размеры итогового бандла могут создавать проблемы.

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

Как понять какие компоненты сколько занимают места, как сократить размер бандла и улучшить скорость загрузки?

Ngx-kit — набор инструментов и генератор компонентов для Angular 5

| версия Angular: 5
ngx-kit-preview.jpg

Если вы активно работаете с Angular, то наверняка сталкивались с тем, что сторонний компонент не поддерживает какой-то функционал, работает неправильно или выглядит не совсем так, как того требует заказчик-дизайнер-бизнес.

Попробуем разобраться, почему так происходит и что можно с этим сделать.

Упрощение импортов scss/less/styl в Angular

| версия Angular: 5
style-imports-preview.png

Это простая, но очень удобная фича, которую незаслуженно игнорируют.

Предположим, у вас в проекте есть файл с переменными или миксинами, которые вы хотите добавить в файл стилей компонента. Часто можно видеть что-то такое:

1
@import "../../../../params.scss";

Это полностью рабочее решение и редакторы хорошо справляются с исправлением путей при перемещении таких файлов. Но при создании/копировании все еще приходится “целиться” в нужную подкатегорию и это занимает драгоценное время.

С помощью includePaths можно это исправить и использовать простой способ:

1
@import "params.scss";

Общий функционал и Lazy-модули в Angular

| версия Angular: 5
angular-lazy-modules-micro-modules.jpg

Lazy-модули позволяют эффективно уменьшить размер “первой загрузки” и ускорить скорость старта приложения. Если вы еще не знакомы с ними, то основная идея в том, чтобы разбить приложение на модули, которые будут загружаться при переходе на определенный url.

За загрузку отвечает роутер и важным условием для их правильной работы является отсутствие прямого импорта между модулями, иначе код попадет в общий чанк.

Однако часто появляется необходимость использовать компоненты одного модуля в другом и тут есть несколько вариантов дальнейших действий.

RxJS Lettable Operators и Angular CLI 1.4.9+

| версия Angular: 4
rxjs-lettable-angular-cli.jpg

В @angular/[email protected] добавили поддержку [email protected] и вы можете попробовать новый механизм для управления потоками.

Раньше мы писали так:

1
2
3
4
5
6
7
8
9
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/pluck';
import 'rxjs/add/operator/filter';
stream
.takeUntil(...)
.pluck(...)
.filter(...)
.subscribe();

А теперь можем так:

1
2
3
4
5
6
7
8
9
import { takeUntil, pluck, filter } from 'rxjs/operators';
stream
.pipe(
takeUntil(...),
pluck(...),
filter(...),
)
.subscribe();

Proudly powered by Hexo and Theme by Hacker
© 2018 Sasha Novik