Розробка з Angular — це справжнє задоволення, але іноді ми робимо помилки, про які навіть не здогадуємось. Ці помилки, накопичуючись, можуть спричинити серйозні проблеми. Продуктивність фронтенд-застосунку надзвичайно важлива, тому в цій статті я вирішив поділитися кількома простими порадами для покращення продуктивності вашого Angular-застосунку.
1. Надмірне використання Pipes
Надмірне використання Pipes є поширеною помилкою. Pipes, які виконують важкі операції, можуть виконуватись кілька разів, що погіршує продуктивність вашого застосунку.
Погано👎🏼
@Pipe({
name: 'expensiveCalculation',
pure: false
})
export class ExpensiveCalculationPipe implements PipeTransform {
transform(value: any): any {
// Важка логіка трансформації
}
}
Добре👍🏼
@Pipe({
name: 'expensiveCalculation',
pure: true
})
export class ExpensiveCalculationPipe implements PipeTransform {
transform(value: any): any {
// Легка логіка трансформації
}
}
Основна різниця тут полягає в тому, щоб забезпечити, щоб Pipe був чистим (pure), тобто не виконувався щоразу, мінімізуючи вплив на продуктивність.
2. Неконтрольовані підписки
Не скасовувати підписки може призвести до витоків пам'яті та погіршення продуктивності.
Погано👎🏼
Код не керує підпискою Observable належним чином. subscribe() викликається безпосередньо, але немає механізму для скасування підписки, коли компонент буде знищено, що може призвести до витоків пам'яті.
ngOnInit() {
this.myService.myObservable.subscribe(value => {
// Робимо щось з value
});
}
Добре👍🏼
З takeUntilDestroyed, вам більше не потрібно створювати та керувати окремим Subject для контролю того, коли підписки мають бути скасовані. Цей оператор є більш прямим і був створений для спрощення коду.
ngOnInit(): void {
this.meuServico.obterDados()
.pipe(takeUntilDestroyed(this))
.subscribe(dados => {
// Обробляємо дані
});
}
}
3. Відсутність оптимізації пакетів
Неоптимізовані пакети можуть значно збільшити час завантаження застосунку.
Погано👎🏼
За замовчуванням Angular CLI не налаштовує оптимізацію пакетів, що може призвести до довшого часу завантаження.
// Стандартна конфігурація Angular CLI
{
"projects": {
"meu-aplicativo": {
"architect": {
"build": {
"configurations": {
"production": {
"optimization": false, // Відсутня оптимізація
"sourceMap": true, // Включено source map
"extractCss": false, // CSS не виділяється
"namedChunks": true, // Використовуються іменовані chunks
"aot": false, // Без Ahead of Time Compilation
"vendorChunk": true, // Пакет vendor не розділено
"buildOptimizer": false // Оптимізація build не включена
}
}
}
}
}
}
}
Добре👍🏼
Використовуйте конфігурації Angular CLI для оптимізації пакетів, активуючи компіляцію Ahead of Time (AOT), tree-shaking та виділення CSS. Ці налаштування зменшують розмір пакету та покращують продуктивність.
{
"projects": {
"meu-aplicativo": {
"architect": {
"build": {
"configurations": {
"production": {
"optimization": true, // Увімкнено оптимізацію
"sourceMap": false, // Вимкнено source map
"extractCss": true, // Виділення CSS у окремий файл
"namedChunks": false, // Видалено іменовані chunks
"aot": true, // Увімкнено AOT
"vendorChunk": false, // Розділення коду vendor
"buildOptimizer": true // Увімкнено build optimizer
}
}
}
}
}
}
}
Увімкнувши ці налаштування, Angular CLI оптимізує побудову для продакшн-середовища, зменшуючи розмір пакетів і покращуючи час завантаження застосунку.
4.
Розробка з Angular — це справжнє задоволення, але іноді ми робимо помилки, про які навіть не здогадуємось. Ці помилки, накопичуючись, можуть спричинити серйозні проблеми. Продуктивність фронтенд-застосунку надзвичайно важлива, тому в цій статті я вирішив поділитися кількома простими порадами для покращення продуктивності вашого Angular-застосунку.
1. Надмірне використання Pipes
Надмірне використання Pipes є поширеною помилкою. Pipes, що виконують важкі операції, можуть виконуватись кілька разів, що погіршує продуктивність вашого застосунку.
Погано👎🏼
@Pipe({
name: 'expensiveCalculation',
pure: false
})
export class ExpensiveCalculationPipe implements PipeTransform {
transform(value: any): any {
// Важка логіка трансформації
}
}
Добре👍🏼
@Pipe({
name: 'expensiveCalculation',
pure: true
})
export class ExpensiveCalculationPipe implements PipeTransform {
transform(value: any): any {
// Легка логіка трансформації
}
}
Основна різниця тут полягає в тому, щоб забезпечити, щоб Pipe був чистим (pure), тобто не виконувався щоразу, мінімізуючи вплив на продуктивність.
2. Неконтрольовані підписки
Не скасовувати підписки може призвести до витоків пам'яті та погіршення продуктивності.
Погано👎🏼
Код не керує підпискою Observable належним чином. subscribe() викликається безпосередньо, але немає механізму для скасування підписки, коли компонент буде знищено, що може призвести до витоків пам'яті.
ngOnInit() {
this.myService.myObservable.subscribe(value => {
// Робимо щось з value
});
}
Добре👍🏼
З takeUntilDestroyed, вам більше не потрібно створювати та керувати окремим Subject для контролю того, коли підписки мають бути скасовані. Цей оператор є більш прямим і був створений для спрощення коду.
ngOnInit(): void {
this.meuServico.obterDados()
.pipe(takeUntilDestroyed(this))
.subscribe(dados => {
// Обробляємо дані
});
}
}
3. Відсутність оптимізації пакетів
Неоптимізовані пакети можуть значно збільшити час завантаження застосунку.
Погано👎🏼
За замовчуванням Angular CLI не налаштовує оптимізацію пакетів, що може призвести до довшого часу завантаження.
// Стандартна конфігурація Angular CLI
{
"projects": {
"meu-aplicativo": {
"architect": {
"build": {
"configurations": {
"production": {
"optimization": false, // Відсутня оптимізація
"sourceMap": true, // Включено source map
"extractCss": false, // CSS не виділяється
"namedChunks": true, // Використовуються іменовані chunks
"aot": false, // Без Ahead of Time Compilation
"vendorChunk": true, // Пакет vendor не розділено
"buildOptimizer": false // Оптимізація build не включена
}
}
}
}
}
}
}
Добре👍🏼
Використовуйте конфігурації Angular CLI для оптимізації пакетів, активуючи компіляцію Ahead of Time (AOT), tree-shaking та виділення CSS. Ці налаштування зменшують розмір пакету та покращують продуктивність.
{
"projects": {
"meu-aplicativo": {
"architect": {
"build": {
"configurations": {
"production": {
"optimization": true, // Увімкнено оптимізацію
"sourceMap": false, // Вимкнено source map
"extractCss": true, // Виділення CSS у окремий файл
"namedChunks": false, // Видалено іменовані chunks
"aot": true, // Увімкнено AOT
"vendorChunk": false, // Розділення коду vendor
"buildOptimizer": true // Увімкнено build optimizer
}
}
}
}
}
}
}
Увімкнувши ці налаштування, Angular CLI оптимізує побудову для продакшн-середовища, зменшуючи розмір пакетів і покращуючи час завантаження застосунку.
4.
Cuidado com o Change Detection
Виявлення змін надмірно часто може погіршити продуктивність вашого застосунку, оскільки Angular перевіряє та оновлює стан компонентів більше разів, ніж це необхідно.
Погано👎🏼
Angular виконує виявлення змін на кожному циклі виконання, що може бути неефективно, особливо якщо компонент часто отримує дані, але вони не змінюються.
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Input() data: any;
}
Добре👍🏼
Для покращення продуктивності використовуйте стратегію OnPush в компонентах, які не потребують постійного виявлення змін. Завдяки цьому виявлення змін буде відбуватися лише тоді, коли вхідні дані (@Input()) компонента змінюються.
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
@Input() data: any;
}
Використовуючи OnPush, виявлення змін відбувається лише тоді, коли є зміни у значенні вхідних даних компонента, що покращує продуктивність і запобігає непотрібним перевіркам.
Кінець лінії
Створювати швидкі застосунки з гарною продуктивністю в Angular набагато простіше, ніж здається, треба лише звертати увагу на кілька деталей:
- Уникайте надмірного використання Pipes: Якщо Pipe виконує важкі трансформації, це може погіршити продуктивність. Використовуйте оптимізовані Pipes, щоб уникнути перевантаження.
- Правильно керуйте підписками: Якщо не скасувати підписки, ваш застосунок може зіткнутися з витоками пам'яті. Використовуйте
async pipeабо керуйте підписками ефективно черезtakeUntil. - Оптимізуйте ваші пакети: За допомогою правильних налаштувань Angular CLI ви можете зменшити розмір пакетів і покращити час завантаження застосунку.
- Використовуйте стратегію OnPush для виявлення змін: Коли це можливо, застосовуйте цю стратегію, щоб Angular виконував виявлення змін лише коли це справді необхідно, роблячи все швидше.
Sprezzatura
Cuidado com o Change Detection
Надмірне виявлення змін може погіршити продуктивність вашого застосунку, оскільки Angular перевіряє та оновлює стан компонентів більше разів, ніж необхідно.
Погано👎🏼
Angular виконує виявлення змін на кожному циклі виконання, що може бути неефективним, особливо якщо компонент отримує дані часто, але без змін.
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Input() data: any;
}
Добре👍🏼
Для покращення продуктивності використовуйте стратегію OnPush в компонентах, які не потребують постійного виявлення змін. Завдяки цьому виявлення змін відбувається тільки тоді, коли входи (@Input()) компонента змінюються.
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
@Input() data: any;
}
Використовуючи OnPush, виявлення змін відбувається лише тоді, коли є зміни у значенні входів компонента, що покращує продуктивність і запобігає непотрібним перевіркам.
Кінець лінії
Створювати швидкі застосунки з гарною продуктивністю в Angular набагато простіше, ніж здається, потрібно лише звертати увагу на кілька деталей:
- Уникайте надмірного використання Pipes: Якщо Pipe виконує важкі трансформації, це може погіршити продуктивність. Використовуйте оптимізовані Pipes, щоб уникнути перевантаження.
- Правильно керуйте підписками: Якщо ви не скасовуєте підписки, ваш застосунок може зазнати витоків пам'яті. Використовуйте
async pipeабо ефективно керуйте підписками за допомогоюtakeUntil. - Оптимізуйте свої пакети: З правильними налаштуваннями Angular CLI ви можете зменшити розмір пакетів і покращити час завантаження застосунку.
- Використовуйте стратегію OnPush для виявлення змін: Коли це можливо, застосовуйте цю стратегію, щоб Angular виконував виявлення змін лише коли це дійсно необхідно, роблячи все швидшим.
Sprezzatura
Перекладено з: Aplicativo Angular Lento? Vamos melhorar isso.