Все, що потрібно знати про розщеплення JavaScript

Сучасні сайти часто поєднують всі свої JavaScript в єдиний, великий main.js сценарій. Цей регулярно містить скрипти для всіх ваших сторінок або маршрутів, навіть якщо користувачі потребують лише невелика частина сторінки, яку вони переглядають.

Коли JavaScript обслуговується таким чином, ефективність завантаження ваших веб-сторінок може страждати - особливо з Реактивний веб-дизайн на мобільних пристроях. Отже, давайте зафіксувати його, впроваджуючи розщеплення JavaScript.

• Як код швидше, більш світлий JavaScript

Яка проблема розщеплює код?

Коли веб-браузер бачить a & lt; сценарій & gt; Він повинен проводити час завантаження та обробки JavaScript, який ви посилаєтеся. Це може відчувати себе швидким на висококласним пристроям, але завантаження, аналіз та виконання невикористовуваного коду JavaScript може зайняти деякий час на середніх мобільних пристроях з більш повільною мережею та повільним процесором. Якщо ви коли-небудь повинні були увійти до кав'ярня або готель Wi-Fi, ви знаєте, що повільна мережева досвідом може статися з усіма.

Кожен другий витрачений очікування на JavaScript для завершення завантаження може затримати, як скоро користувачі зможуть взаємодіяти з вашим досвідом. Особливо це стосується, якщо ваш UX спирається на JS для критичних компонентів або навіть просто прикріплюючи обробники подій для простих частин інтерфейсу користувача.

Мені потрібно турбувати з розщепленням коду?

Це, безумовно, варто попросити себе, чи потрібно виконати код (якщо ви використовували простий Веб-будівельник ви, напевно, не). Якщо ваш сайт вимагає JavaScript для інтерактивного вмісту (для функцій, таких як ящики для меню та каруселлів) або є односторонньою програмою, яка спирається на рамки JavaScript для рендерингу UI, відповідь, швидше за все, "так". Незалежно від того, чи є кодовим розщепленням для вашого сайту, це питання, яке вам потрібно буде відповісти. Ви розумієте свою архітектуру та як ваш сайт завантажує найкраще. На щастя, є інструменти, доступні для вас тут. Пам'ятайте, що якщо ви реалізуєте зміни у вашій системі дизайну, збережіть ці зміни у вашому спільному хмара зберігання Отже, ваша команда бачила.

Отримати допомогу

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

PagesPeed Insights це онлайн-інструмент, який також може виділити продуктивність вашого сайту - і включає в себе дані Lab з маяка та реальних даних на вашому сайті з доповіддю користувачів Chrome. Ваш веб хостинг Сервіс може мати інші варіанти.

Покриття коду в інструментах розробника Chrome

Якщо це схоже, у вас є дорогі скрипти, які можуть бути кращими, розділені, наступний інструмент для перегляду - це функція покриття коду в інструментах розробника Chrome (DevTools & GT, верхня праве меню & GT; більше інструментів & GT; охоплення). Це заходи, скільки невикористаних JavaScript (і CSS) знаходиться на вашій сторінці. Для кожного сценарію узагальнено, DevTools покаже "невикористані байти". Це код, який ви можете розглянути можливість розщеплення та Lazy-Lave, коли користувач потребує цього.

Різні види кодового розщеплення

Є кілька різних підходів, які ви можете взяти, коли мова йде про код розщеплення JavaScript. Скільки вони застосовуються до вашого сайту, як правило, змінюється залежно від того, чи хочете ви розділити сторінку / програми "логіка" або розділити бібліотеки / рамки з інших "постачальників".

Динамічний код розщеплення: Багато хто з нас "статично" імпорту javascript модулів та залежностей так, щоб вони були укладені в один файл під час збірки. Розширення "Динамічний" код додає можливість визначити точки у вашому JavaScript, який ви хочете розділити та ліниво-навантаження за потребою. Сучасний JavaScript використовує динаміку Імпорт () Заява для досягнення цього. Ми будемо більш коротко.

Розщеплення коду постачальника: Рамки та бібліотеки, які ви покладаєтеся на (наприклад, реагують, кутові, VUE або LODASH) навряд чи зміниться в скриптах, які ви надсилаєте до своїх користувачів, часто, як "логіка" для вашого сайту. Щоб зменшити негативний вплив кеш -ваналізації для користувачів, які повертаються на свій сайт, ви можете розділити свої "продавці" у окремий скрипт.

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

Для наших цілей у цій статті буде зосереджена на розщепленні динамічного коду.

Отримати руки з розщепленням коду

Давайте оптимізувати ефективність JavaScript a Просте застосування, яке сортує три цифри Через розщеплення коду - це додаток моїм колегою житла djirdeh. Робочий процес ми будемо використовувати, щоб зробити наш завантаження JavaScript швидко вимірювати, оптимізувати та контролювати. Починай тут .

Виміряти продуктивність

Перш ніж намагатися додати будь-які оптимізації, ми спочатку збираємося вимірювати продуктивність нашого JavaScript. Оскільки програма Magic Sorter розміщена на глюк, ми будемо використовувати своє кодуюче середовище. Ось як йти про це:

• Натисніть кнопку Show Live.
• Відкрийте devtools, натиснувши параметр cmd + + i / ctrl + shift + i.
• Виберіть мережеву панель.
• Переконайтеся, що вимкніть кеш, перевірте та перезавантажте додаток.

Ця проста програма, здається, використовує 71,2 кб JavaScript, просто сортувати кілька номерів. Що, звичайно, не здається правильним. У нашому джерелі src / index.js , утилітаційна бібліотека Лодаш, і ми використовуємо сортувати за - Один з його сортувальних утиліт - щоб відсортувати наші номери. Lodash пропонує кілька корисних функцій, але додаток використовує лише один метод від нього. Це загальна помилка для встановлення та імпорту всієї сторонніх залежностей, коли насправді, вам потрібно лише використовувати невелику його частину.

Оптимізуйте свій пакет

Є кілька варіантів, доступних для обрізання нашого розміру Bundle 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";
Імпорт _ від "Лодаш";
імпортувати відторні від "Лодаш.Сорбі"; 

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

 js
form.addeventlistener ("Надіслати", e = & gt; {
  e.preventdefault ();
  const bagnement = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  const sortedvalues ​​= _.Sortby (значення);
  const sortedvalues ​​= sortby (значення);
  results.innerhtml = `
    & lt; h2 & gt;
      $ {SortedValues}
    & lt; / h2 & gt;
  `
}); 

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

JavaScript код розщеплення

WebPack є одним з найпопулярніших бавовників JavaScript, який використовуються веб-розробниками сьогодні. Це "пучки" (поєднуються) всі ваші модулі JavaScript та інші активи в статичні файли веб-браузерів можуть читати.

Єдиний пучок у цій програмі можна розділити на два окремі скрипти:

• Один несе відповідальність за кодовище, що складається з початкового маршруту.
• Інший містить наш код сортування.

Використання динамічного імпорту (з Імпорт () Ключове слово), другий скрипт може бути ледачим завантаженим за попитом. У наших магічних номерах додаток код, що складається з сценарію, може бути завантажений, якщо потрібно, коли користувач натискає кнопку. Ми починаємо з усунення імпорту верхнього рівня для способу сортування в src / index.js :

 Імпорт згорнути від "Лодаш.Сорбі"; 

Імпортуйте його в межах слухача подій, що пожежі, коли кнопка натискається:

form.addeventlistener ("Надіслати", e = & gt; {
  e.preventdefault ();
  Імпорт ('Lodash.Sortby')
    .then (модуль = & gt; модуль.default)
    .then (Sortinput ())
    .catch (err = & gt; {errom (err)});
});

Ця динаміка Імпорт () Функція, яку ми використовуємо, є частиною пропозиції стандартівтрек для включення здатності динамічно імпортувати модуль у стандарті мови JavaScript. Веб-сайт вже підтримує цей синтаксис. Ви можете дізнатись більше про те, як працює динамічний імпорт У цій статті .

Точний Імпорт () Заява повертає обіцянку, коли він вирішує. WebPack вважає це як розкол, що вона вирвана в окремий скрипт (або шматок). Після того, як модуль повертається, то Модуль.default використовується для посилання на експорт за замовчуванням лопатка . Обіцянка прикупована іншою .потім() дзвонити сортування Спосіб сортування трьох вхідних значень. Наприкінці обіцянки ланцюга, .улов() Покликається обробляти, де обіцянка відхиляється як результат помилки.

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

У випадку, якщо ви бачите помилку Linting, наприклад "Помилка розбору: Імпорт та експорт може відображатися лише на верхньому рівні", знайте, що це пов'язано з динамічним синтаксисом імпорту, але ще не завершено. Хоча веб-сайт підтримує його, налаштування для Eslint (інструмент Linting JavaScript), який використовується Glitch, не оновлено, щоб включити цей синтаксис, але він все ще працює.

Останнє, що нам потрібно зробити, це написати сортування метод в кінці нашого файлу. Це має бути функція, яка повертає функцію, яка приймає в імпортованому методі з Lodash.Sortby . Вкладена функція може сортувати три вхідні значення та оновити DOM:

 const sortinput = () = & gt; {
  повернення (sortby) = & gt; {
    CONST значення = [
      invent1.valueasnumber,
      input2.valueasnumber,
      input3.valueasnumber
    ];
    const sortedvalues ​​= sortby (значення);
    results.innerhtml = `
      & lt; h2 & gt;
        $ {SortedValues}
      & lt; / h2 & gt;
    `
  };
} 

Стежити за номерами

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

Розщеплення коду JavaScript та Lazy-Loading може бути дуже корисним для обрізання початкового розміру пакетів вашого додатка або сайту. Це може безпосередньо призвести до більш швидкого завантаження сторінок для користувачів. Незважаючи на те, що ми розглянули додавання коду, що розщеплює до програми Vanilla JavaScript, ви також можете застосувати його до додатків, побудованих з бібліотеками або рамками.

Lazy-Loading з бібліотекою JavaScript або Framework

Багато популярних каркасних підтримує додавання коду розподілу та Lazy-Lave, використовуючи динамічний імпорт та веб-сайт.

Ось як ви можете Lazy-завантажувати компонент фільму "Опис", використовуючи реагування (з React.lazy () та їхня сила напруженості), щоб забезпечити "завантаження ...", а компонент ледачим завантаженим (див тут Для деяких деталей):

 Імпортувати реагування, {suspencense} від «реагування»;
CONST Опис = React.Lazy (() = & GT; Імпорт ('./ Опис'));
Функція програми () {
  повернення ("
    & lt; div & gt;
      & lt; h1 & gt; мій фільм & lt; / h1 & gt;
      & lt; підвіска Fagback = "Завантаження ..." & GT;
        & lt; опис / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

Розщеплення коду може допомогти зменшити вплив JavaScript на свій досвід користувачів. Безумовно, вважаю, якщо у вас є більші пучки JavaScript, і коли ви сумніваєтеся, не забудьте виміряти, оптимізувати та монітор.

Ця стаття була опублікована у випуску 317 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити проблему 317 тут або Підписатися тут .

Пов'язані статті:

• 9 кращих рамок JavaScript
• 15 основних інструментів JavaScript ви повинні використовувати
• 14 кращих JavaScript Apis