Уменьшите размер пакета JS за счет динамического импорта модулей es6
2 марта 2022 г.Уменьшение начального размера пакета JavaScript может повысить производительность вашего приложения, поскольку чем меньше браузеру javascript нужно анализировать и компилировать на начальном этапе, тем меньше будет время загрузки.
Кроме того, взаимодействие с пользователем может задерживаться, если основной поток браузера занят выполнением JavaScript, поэтому меньший размер пакета означает, что страница станет интерактивной для пользователя раньше, и это поможет улучшить основные веб-показатели, такие как задержка первого ввода (FID) ) или First Contentful Paint (FCP).
Один из способов уменьшить размер пакета JavaScript — динамически импортировать модули es6, которые не требуются для первоначальной загрузки страницы. Это похоже на [разделение кода в реакции] (https://reactjs.org/docs/code-splitting.html), где вы лениво загружаете компоненты реакции по требованию.
Для динамического импорта модуля ключевое слово import должно вызываться как функция с путем к модулю в качестве аргумента. вы можете получить соответствующую экспортированную функцию из объекта «все модули».
```javascript
const moduleSpecifier = "путь_к_модулю"
импорт (спецификатор модуля). затем (
(все модули) => {
// allModules будет иметь все модули, экспортированные из файла, указанного в пути, аналогично импорту * as allModules from 'path_to_module'
всемодули.моя функция();
(ошибка) => {
// обработать ошибку при загрузке или запуске модуля, например, проблему с сетью, исключение при выполнении функции
Пример использования:
Рассмотрим страницу входа в веб-приложение, где пользователь вводит адрес электронной почты/телефон в форму входа, и значение необходимо проверить, чтобы убедиться, что формат правильный, прежде чем отправлять его на сервер для аутентификации. Здесь нам не нужно статически импортировать функцию проверки в начальный пакет, потому что функцию проверки нужно вызывать только тогда, когда пользователь начинает заполнять форму или когда пользователь отправляет форму, поэтому вместо статического импорта мы можем импортировать его динамически, когда пользователь начинает печатать или когда пользователь нажимает кнопку отправки.
```javascript
функция экспорта emailOrPhoneNumberValidator(значение) {
```javascript
импортировать {useState} из "реагировать";
const moduleSpecifier = "./валидаторы";
функция экспорта по умолчанию App() {
const [имя_пользователя, setUserName] = useState("");
проверка функции (имя пользователя) {
импорт (спецификатор модуля). затем (
(модуль проверки) => {
let isValid = validatorModule.emailOrPhoneNumberValidator(userName);
console.log("Действителен :>> ", Действителен);
(ошибка) => {
console.log("ошибка :>> ", ошибка);
вернуть (
<ввод
тип = "текст"
значение = {имя_пользователя}
onChange={(e) => setUserName(e.target.value)}
Здесь функция проверки отсутствует в исходном пакете, который был отправлен в браузер пользователя, он загружается только тогда, когда пользователь нажимает кнопку отправки. В случае, если пользователь не отправил форму, пакет валидатора вообще не будет загружен. Мы можем просмотреть это на вкладке сети браузера в консоли, нажать кнопку отправки и заметить, что модуль валидатора загружается по сетевому вызову.
Динамический импорт модулей es6 будет полезен, когда вы хотите загрузить и отобразить плагин/виджет на основе конфигурации, вы можете лениво загружать модули на основе конфигурации вместо статической загрузки всех модулей, это помогает сократить время загрузки и уменьшить раздувание. веб-приложения.
Оригинал