Все, что вам нужно знать о разделении кода JavaScript

Современные сайты часто объединяют весь свой JavaScript в одном, большой Main.js. скрипт Это регулярно содержит сценарии для всех ваших страниц или маршрутов, даже если пользователи нуждаются в небольшой части для просмотра страницы.

Когда JavaScript подается таким образом, производительность загрузки ваших веб-страниц может страдать - особенно с Отзывчивый веб-дизайн на мобильных устройствах. Итак, давайте исправим это, реализуя расщепление кода JavaScript.

• Как кодировать быстрее, легкий JavaScript

Какую проблему решается разделение кода?

Когда веб-браузер видит & lt; скрипт & gt; Он должен проводить время загрузки и обработки JavaScript, которые вы ссылаетесь на ссылку. Это может чувствовать себя быстро на высококачественных устройствах, но загрузка, анализ и выполнение неиспользованного кода JavaScript может занять некоторое время в среднем мобильных устройствах с более медленной сетью и медленнее CPU. Если вы когда-нибудь должны были войти в кафе-магазин или Wi-Fi, вы знаете, что медленный сетевой опыт может случиться со всеми.

Каждая секунда, проведенная в ожидании JavaScript для завершения загрузки, может задержать, как скоро пользователи могут взаимодействовать с вашим опытом. Это особенно тот случай, если ваш UX полагается на JS для критических компонентов или даже просто прикрепляя обработчики событий для простых кусков UI.

Нужно ли беспокоить кодовую расщепление?

Это, безусловно, стоит спрашивать себя, нужно ли вам кодировать разделение (если вы использовали простой Строитель сайта Вы, вероятно, не). Если ваш сайт требует JavaScript для интерактивного контента (для функций, таких как ящики меню и карусели) или является одностраничным приложением, опираясь на JavaScript Frameworks для рендеринга UI, ответ, скорее всего, «да». Стоит ли расщепление кода для вашего сайта, это вопрос, вам нужно ответить на себя. Вы понимаете свою архитектуру и как ваш сайт загружает лучше всего. К счастью, есть инструменты, которые помогут вам здесь. Помните, что если вы реализуете изменения по всей вашей системе дизайна, сохраните эти изменения в вашем общем облачное хранилище Так что ваша команда может видеть.

Получить помощь

Для тех новых для разделения кода JavaScript, Маяк - Аудиты Панель в инструментах разработчиков Chrome - может помочь светить светом о том, является ли это проблемой для вашего сайта. Аудит, который вы захотите искать, уменьшает время выполнения JavaScript (задокументировано здесь ). Этот аудит подчеркивает все сценарии на вашей странице, которая может задержать пользователь, взаимодействующий с ним.

PageSpeed ​​Insights Это онлайн-инструмент, который также может выделить производительность вашего сайта - и включает в себя лабораторные данные из маяка и реальных данных о производительности вашего сайта из отчета о возможностях пользователей Chrome. Ваш веб хостинг Сервис может иметь другие варианты.

Кодовое покрытие в инструментах разработчика Chrome

Если у вас похоже, что у вас есть дорогостоящие сценарии, которые могут быть лучше разделены, следующий инструмент, на котором есть функция охвата кода в инструментах разработчика Chrome (devtools & gt; верхнее правое меню и gt; больше инструментов & gt; покрытие). Это измеряет насколько неиспользуемый JavaScript (и CSS) находится на вашей странице. Для каждого сценария суммирована, Devtools покажет «неиспользованные байты». Это код, который вы можете рассмотреть расщепление и ленивую загрузку, когда ему нужен пользователь.

Различные виды кодовых расщеплений

Существует несколько разных подходов, которые вы можете взять, когда речь идет о разделении кода JavaScript. Насколько они применяются к вашему сайту, как правило, варьируются в зависимости от того, хотите ли вы разбить страницу / приложение «логику» или разделить библиотеки / рамки от других «поставщиков».

Динамическое расщепление кода: Многие из нас «статически» импортируют модули и зависимости JavaScript, чтобы они были объединены в один файл в построении времени. «Динамическое» кодовое расщепление добавляет возможность определить точки в вашем JavaScript, который вы хотели бы разделить и ленивую нагрузку по мере необходимости. Современный JavaScript использует динамический импорт() заявление для достижения этого. Мы рассмотрим это более коротко.

Поставщик Code Spliting: Рамки и библиотеки, на которых вы полагаетесь (например, Rect, Angular, Vue или Lodash) вряд ли изменяются в сценариях, которые вы отправляете своим пользователям, часто как «логика» для вашего сайта. Чтобы уменьшить негативное влияние недействительной кэш-памяти для пользователей, возвращающихся на ваш сайт, вы можете разделить ваши «поставщики» в отдельный скрипт.

Код входа-точечного кода Разделение: Записи являются отправными точками на вашем сайте или приложении, что инструмент, похожий на WebPack, может посмотреть на создание дерева зависимости. Разделение по записям полезно для страниц, где маршрутизация на стороне клиента не используется, или вы полагаетесь на комбинацию сервера и рендеринга на стороне клиента.

Для наших целей в этой статье мы сосредоточимся на динамическом расщеплении кода.

Получить руки с расщеплением кода

Давайте оптимизируем производительность JavaScript Простое приложение, которое сортирует три числа Через кодовую расщепление - это приложение моего коллеги HOWSEIN DJIRDEH. Рабочий процесс, который мы будем использовать, чтобы сделать наш загрузок JavaScript быстро, это мера, оптимизация и монитор. Начни здесь Отказ

Измерьте производительность

Прежде чем пытаться добавить любые оптимизации, мы сначала собираемся измерить производительность нашего JavaScript. Поскольку приложение Magic Sorter размещено на Glitch, мы будем использовать его среду кодирования. Вот как пойти в это:

• Нажмите кнопку SHOW LIVE.
• Откройте Devtools, нажав CMD + опцию + I / Ctrl + Shift + I.
• Выберите сетевую панель.
• Убедитесь, что отключить кэш, проверяется и перезагрузите приложение.

Это простое приложение, по-видимому, использует 71,2 КБ JavaScript, чтобы сортировать несколько номеров. Это, безусловно, не кажется прав. В нашем источнике SRC / index.js. Библиотека утилиты Lodyash импортируется и мы используем Сортировать по - Один из его сортировков - для сортировки наших номеров. Лоташ предлагает несколько полезных функций, но приложение использует только один метод от него. Это распространенная ошибка для установки и импорта все сторонние зависимости, когда на самом деле вам нужно только использовать небольшую часть этого.

Оптимизировать свой пакет

Есть несколько вариантов, доступных для обрезки нашего размера пакета JavaScript:

1. Напишите пользовательский метод сортировки вместо того, чтобы полагаться на библиотеку третьего раза.
2. Использовать Array.prototype.sort () , который встроен в браузер.
3. Только импорт Сортировать по Метод от Лодаша вместо всей библиотеки.
4. Только загрузите код для сортировки, когда ему нужен пользователь (когда они нажимают кнопку).

Варианты 1 и 2 подходят для уменьшения размера нашего пакета - они, вероятно, имеют смысл для реального применения. Для учебных целей мы собираемся попробовать что-то другое. Варианты 3 и 4 помогают повысить производительность приложения.

Импортируйте только код, который вам нужен

Мы изменим несколько файлов, чтобы импортировать только один Сортировать по Метод нам нужен от Лодаш. Давайте начнем с замены нашего лоташ зависимость от Package.json. :

"lodash": "^4.7.0",

с этим:

"lodash.sortby": "^4.7.0",

В SRC / index.js мы импортируем этот более конкретный модуль:

 JS
Импорт "./style.css";
Импорт _ из "Лоташ";
Импорт сорти от "Loadash.sortby"; 

Далее мы обновим, как сортируются значения:

 JS
form.addeventListener («Отправить», E = & GT; {
  E.PreventDefault ();
  const stass = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  const sortedvalues ​​= _.sortby (значения);
  const sortedvalues ​​= сорти (значения);
  Результаты .innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

Перезагрузите приложение Magic Numbers, откройте инструменты разработчика и снова посмотрите на сетевую панель. Для этого конкретного приложения наш размер пакета был уменьшен по шкале от четырех с небольшим количеством работы. Но есть еще много места для улучшения.

JavaScript Code Spliting

WebPack - один из самых популярных Bundlers JavaScript Bundlers, используемых веб-разработчиками сегодня. Это «пучки» (объединяет) все ваши JavaScript Modules и другие активы в статические файлы веб-браузеров могут прочитать.

Один пакет в этом приложении может быть разделен на два отдельных сценария:

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

Используя динамический импорт (с импорт() Ключевое слово), второй скрипт может быть ленивым по требованию. В нашем приложении Magic Numbers код, составляющий скрипт, может быть загружен по мере необходимости, когда пользователь нажимает кнопку. Начнем с удаления импорта верхнего уровня для метода сортировки в SRC / index.js. :

 Импорт сорти от «Loadash.sortby»; 

Импортируйте его в прослушиватель событий, который загорится, когда кнопка нажала:

form.addeventListener («Отправить», E = & GT; {
  E.PreventDefault ();
  Импорт ('lodash.sortby')
    .then (модуль = & gt; module.default)
    .then (сортинпуссия ())
    .catch (err = & gt; {alert (err)});
});

Эта динамика импорт() Функция, которую мы используем, является частью предложения стандартного расширения для включения способности динамически импортировать модуль в стандарте языка JavaScript. WebPack уже поддерживает этот синтаксис. Вы можете прочитать больше о том, как работает динамический импорт в этой статье Отказ

То импорт() Заявление возвращает обещание, когда он разрешит. WEBPACK рассматривает это как точку разделения, что он выберет в отдельный скрипт (или кусок). Как только модуль возвращается, модуль.default.default. используется для ссылки на экспорт по умолчанию, предоставляемым лоташ Отказ Обещание привязано другим .тогда() Вызов А. сортинпуссия Способ для сортировки трех входных значений. В конце цепочки обещания, .ловить() призван обращаться с тем, где обещание отклоняется в результате ошибки.

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

Если вы видите ошибку изготавливания, такие как «Ошибка разборки: Импорт и экспорт, могут появиться только на верхнем уровне», знают, что это связано с синтаксисом динамического импорта, еще не доработанного. Несмотря на то, что WebPack поддерживает его, настройки для ESLINT (подвижный инструмент JavaScript), используемые Glitch, не обновлялись, чтобы включить этот синтаксис, но он все еще работает.

Последнее, что нам нужно сделать, это написать сортинпуссия Способ в конце нашего файла. Это должно быть функцией, возвращающей функцию, которая принимает в импортном методе от lodash.sortby. Отказ Вложенная функция может сортировать три входных значения и обновлять DOM:

 const sortinput = () = & gt; {
  возврат (сортировка) = & gt; {
    ЦЕННОСТИ COND = [
      input1.valueasnumber,
      input2.valueasnumber,
      input3.valueasnumber.
    ];
    const sortedvalues ​​= сорти (значения);
    Результаты .innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

Контролировать цифры

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

Раскраска кода JavaScript и Lazy-loading может быть очень полезным для обрезки исходного размера пучка вашего приложения или сайта. Это может напрямую привести к более быстрому времени загрузки страницы для пользователей. Несмотря на то, что мы посмотрели на добавление кода для разделения кода к приложению Vanilla JavaScript, вы также можете применить его к приложениям, построенным с библиотеками или каркасами.

Lazy-loading с библиотекой или структурой JavaScript

Многие популярные рамки поддерживают добавление расщепления кода и ленивую загрузку с помощью динамического импорта и веб-капуста.

Вот как вы можете лениться - загрузить компонент фильма «Описание» с помощью реакции (с Rect.Lazy () и их функция ожидания), чтобы обеспечить «загрузку ...», в то время как компонент ленивый (см. здесь Подробнее):

 Импорт реагирование, {прессущение} от «реагирования»;
Const Описание = Rect.Lazy (() = & gt; Импорт ('./ Описание'));
Функция приложение () {
  возвращаться (
    & lt; div & gt;
      & lt; h1 & gt; мой фильм & lt; / h1 & gt;
      & lt; repense Foxback = "loading ..." & gt;
        & lt; Описание / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

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

Эта статья была первоначально опубликована в выпуске 317 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить выпуск 317 здесь или же Подписаться здесь Отказ

Статьи по Теме:

• 9 из лучших JavaScript Frameworks
• 15 Основные инструменты JavaScript, которые вы должны использовать
• 14 лучших apis javascript