Оптимизация размеров пакетов в Angular

Development, Java | Amber | Комментировать запись

В этой статье вы узнаете, как использовать библиотеку moment.js и удалить неиспользуемые языковые стандарты, чтобы уменьшить размер пакета.

Примечание: moment.js – популярная библиотека для обработки даты и времени. Однако текущий статус данного инструмента предполагает, что вы можете найти более современные библиотеки, которые могут лучше подойти вашему проекту в зависимости от вашей целевой аудитории. В образовательных целях в этой статье по уменьшению размеров пакетов будет по-прежнему использоваться moment.js.

В этом материале мы возьмем существующий проект, созданный с помощью Angular CLI, и попробуем использовать @angular-builders/custom-webpack для пользовательской настройки веб-пакета.

Требования

• Локальная копия Node.js. Инструкции по установке программы зависят от дистрибутива, выберите свой и следуйте инструкциям: Mac OS, Ubuntu, CentOS, Debian.
• Базовое знакомство с настройкой проекта Angular.

Это руководство было проверено на версиях Angular v10.2.0, @angular-builders/custom-webpack v10.0.1, moment.js v2.29.1 и moment-locales-webpack-plugin v1.2.0.

1: Подготовка проекта

Вы можете использовать инструмент @angular/cli для создания нового проекта Angular.

В окне терминала введите следующую команду:

npx @angular/cli new AngularCustomWebpackConfig --style=css --routing=false --skip-tests

Это настроит новый проект Angular со стилями CSS (также доступны Sass, Less и Stylus), без маршрутизации и тестирования.

Перейдите в только что созданный каталог проекта:

cd AngularCustomWebpackConfig

Затем можно установить в свой тестовый проект библиотеку moment.js и импортировать ее:

npm install moment@2.29.1

Чтобы уменьшить размер библиотеки moment.js, нужно добавить модуль moment-locales-webpack-plugin в качестве devDependency:

npm install --save-dev moment-locales-webpack-plugin@1.2.0

Чтобы иметь возможность создать пользовательскую конфигурацию веб-пакета, нужно добавить пакеты angular-builders/custom-webpack и @angular-builders/dev-server в качестве devDependency:

npm install --save-dev @angular-builders/custom-webpack@10.0.1

На этом этапе у вас есть тестовый проект Angular, сгенерированный через Angular CLI, а также moment.js, moment-locales-webpack-plugin и @angular-builders/custom-webpack.

2: Создание локализованных часов

Для примера в данном материале мы попробуем отобразить информацию о дате и времени на французском языке.

Откройте файл app.component.ts в редакторе кода, импортируйте библиотеку moment и используйте ее для отображения текущего времени в формате «месяц, день, год, время» (LLL) на французском (fr):

import { Component, OnInit } from '@angular/core';

import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentTimeFRLocale: string;

  ngOnInit(): void {
    moment.locale('fr');
    this.currentTimeFRLocale = moment().format('LLL');
  }
}

Затем откройте в редакторе файл app.component.html и используйте currentTimeFRLocale:

<h1>{{ currentTimeFRLocale }}</h1>

Этот код отобразит строку даты и времени.

Запускаем приложение:

npm start

Открываем его в браузере и видим на экране окно с датой в указанном формате и на французском языке.

Убедившись, что ваше приложение работает должным образом, запишите значения main.js и vendor.js в консоли:

chunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]
...
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

Размер файла vendor, который содержит moment.js, составляет 3,04 МБ. Запомним это.

3: Пользовательская настройка локализованных часов

Библиотека moment.js по умолчанию поддерживает множество языков. Бывает, что в аудиторию того или иного проекта включены только несколько конкретных языков. В таком случае имеет смысл удалить ненужные языки, ведь это уменьшит размер файлов. Меньшие файлы быстрее загружаются, а значит, ля конечный пользователь сможет быстрее загрузить ваше приложение.

С помощью редактора кода создайте новый файл custom-webpack.config.js и добавьте в него следующие строки кода:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['fr']
    })
  ]
};

Здесь нам и пригодится плагин moment-locales-webpack-plugin, с его помощью мы сохраним язык fr.

Далее нужно изменить файл angular.json и включить в него эту новую конфигурацию.

Откройте angular.json в редакторе кода. Внутри объекта architect/build обновите builder: вместо angular-devkit/build-angular:browser укажите @angular-builders/custom-webpack:browser и добавьте ключ customWebpackConfig.

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js",
        "replaceDuplicatePlugins": true
      },
      // ...
    },
    // ...
  },
  // ...
}

Это создаст приложение с пользовательской конфигурацией веб-пакета.

Применить пользовательскую конфигурацию веб-пакета можно и при локальной разработке.

Вернитесь в файл angular.json в своем редакторе кода. Внутри объекта architect/serve обновите строку builder, заменив @angular-devkit/build-angular:dev-server на @angular-builders/custom-webpack:dev-server.

"architect": {
  // ...
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "AngularCustomWebpackConfig:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "AngularCustomWebpackConfig:build:production"
      }
    }
  },
  // ...
}

На этом этапе ваше приложение знает, что оно должно использовать @angular-builders/custom-webpack вместо @angular-devkit/build-angular и может найти пользовательскую конфигурацию webpack.

Примечание: Ранее для этого требовался пакет @angular-builders/dev-server. Начиная с версии 8, он считается устаревшим, и вместо него следует использовать @angular-builders/custom-webpack:dev-server.

Запускаем приложение:

npm start

Убедившись, что ваше приложение работает должным образом, обратите внимание на значения main.js и vendor.js в консоли.

Напомним, что стандартная конфигурация веб-пакета сгенерировала main.js и vendor.js следующих размеров:

chunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]
...
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

Пользовательская конфигурация веб-пакета уменьшила размеры файлов main.js и vendor.js:

chunk {main} main.js, main.js.map (main) 9.91 kB [initial] [rendered]
...
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.55 MB [initial] [rendered]

Получилась разница в 5кБ и 490кБ соответственно.

Заключение

В этой статье вы узнали, как применить @angular-builders/custom-webpack, чтобы выполнить пользовательскую конфигурацию веб-пакета. Пользовательская конфигурация дает вам больший контроль над проектом, чем стандартные значения, автоматически сгенерированные Angular CLI.