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, но он будет загружен в старом браузере, поскольку они не понимают этот дополнительный атрибут.
После сборки ваше приложение будет успешно работать во всех современных / устаревших браузерах, не влияя на производительность или время загрузки.
Эта статья оказалась полезной? Дайте мне знать, хлопнув по нему.