React: Реализуйте дифференциальную загрузку для л полифиллов только в устаревшем / старом браузере.

В моей последней статье я описал, как можно использовать полифиллы для запуска приложения React в устаревшем / старом браузере. Последний подход Asper, мы объединяем полифилы вместе с пакетом React, и он загружается в современном браузере, что влияет на производительность и время загрузки.

В этой статье я расскажу, как можно применять полифиллы, не влияя на производительность и время загрузки.

Решение:

Мы собираемся использовать библиотеку core-js для реализации полифилла в нашем проекте.

Установите core-js в свой проект, запустив команду ниже.

npm install --save core-js

После успешной установки создайте файл с именем «polyfills.js» в каталоге «/ src».

В polyfills.js добавьте приведенный ниже код.

Если у вас небольшое приложение, вы можете импортировать выборочный полифилл, чтобы уменьшить размер пакета, например:

import 'core-js/array/includes';

Если у вас есть большое приложение и над ним работают несколько разработчиков, я советую вам импортировать все доступные полифиллы в свое приложение.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/array';

Создайте еще один файл с именем app.js в каталоге / src.

Переместите все коды из index.js и поместите их в app.js с небольшими изменениями, как показано ниже.

В файле index.js:

В приведенном выше коде: чтобы проверить современный или устаревший браузер, я проверяю, определен ли window.fetch. Поскольку window.fetch представлен в es6, мы можем использовать его для определения версии JavaScript. Если это старый браузер, мы сначала загрузим polyfills, затем загрузим приложение React и запустим его.

Поскольку мы динамически импортируем файл polyfills.js, Webpack создаст этот файл отдельно. Таким образом, полифиллы больше не являются частью основного пакета.

Я уверен, что вы в восторге от результатов 😄 давайте создадим наше приложение и запустим его в IE.

Несмотря на огромные усилия, наше приложение не работает в IE. 😴😤

Причина в том, что import() использует JavaScript Promise для внутренних целей, а Promise не поддерживается в старом браузере.

Решение этой проблемы - загрузить polyfill для Promise перед использованием методаimport(), как показано ниже.

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

Не волнуйтесь, у проблемы всегда есть решение. Решим эту проблему с помощью Polyfill CDN.

В вашем файле index.html:

<head>
  <script src=”https://polyfill.io/v3/polyfill.min.js?features=Promise" nomodule></script>
</head>

Как видите, мы добавили дополнительный атрибут nomodule. Это скажет современному браузеру не загружать файл js, но он будет загружен в старом браузере, поскольку они не понимают этот дополнительный атрибут.

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

Эта статья оказалась полезной? Дайте мне знать, хлопнув по нему.