Дифференциальная загрузка (Differential Loading) — это функция Angular, которая позволяет генерировать и использовать разные бандлы JavaScript для различных версий браузеров. Это особенность, которая значительно улучшает производительность, так как позволяет загружать более легкие и современные бандлы для современных браузеров, в то время как старые браузеры получают более полные или настраиваемые версии.

Зачем это нужно?

С каждым годом браузеры становятся более производительными и поддерживают все больше новых функций и стандартов. Однако, по-прежнему существует множество пользователей, использующих старые версии браузеров, которые не поддерживают современные возможности.

При использовании дифференциальной загрузки Angular, вы можете:

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

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

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

Как это работает?

В Angular CLI, когда вы создаете новое приложение с помощью команды ng new, по умолчанию включена поддержка дифференциальной загрузки. В результате Angular CLI настраивает два бандла для вашего приложения:

Один бандл для современных браузеров.
Второй бандл для старых браузеров.

Пример настройки

Вы можете посмотреть, как это выглядит в файлe angular.json вашего приложения. В разделе "build" у вас будут настройки optimization, fileReplacements, и многое другое. Вот пример фрагмента конфигурации:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "outputHashing": "all",
          "sourceMap": true,
          "optimization": true,
          "scripts": [],
          "styles": []
        },
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ],
            "optimization": {
              "scripts": true,
              "styles": true
            },
            "budgets": [
              {
                "type": "initial",
                "maximumWarning": "2kb",
                "maximumError": "5kb"
              }
            ]
          }
        }
      }
    }
  }
}

При сборке проекта для продакшн среды (ng build --prod), Angular CLI создаст два файла:

main-es5.js - для поддержки старых браузеров (ES5).

main-es2015.js - для современных браузеров (ES2015+).

Как дифференциальная загрузка работает на практике?

Когда ваше приложение загружается, браузер ссылается на index.html, и в зависимости от того, какой браузер использует пользователь, ему будет предоставлен соответствующий бандл:

<body>
  <script src="main-es2015.js" nomodule></script>
  <script src="main-es5.js"></script>
</body>

nomodule атрибут указывает на то, что скрипт main-es2015.js будет загружен только в браузерах, которые поддерживают ES2015.
Браузеры, которые не поддерживают ES2015, проигнорируют этот скрипт, и вместо этого будет загружен main-es5.js.

Заключение

Дифференциальная загрузка в Angular позволяет создавать более эффективные приложения, оптимизируя их под разные версии браузеров. Это особенно важно в современном веб-разработке, где пользователи могут использовать разные платформы и устройства. Используя эту функцию, вы можете значительно улучшить производительность своих приложений и улучшить пользовательский опыт.

Предыдущий вопрос

Каковы различные виды директив в Angular?

Следующий вопрос

Безопасно ли использовать методы API DOM напрямую с точки зрения безопасности?

Содержание:

Зачем это нужно?

Как это работает?

Заключение

Редактировать