Для зменшення розміру набору - Blog Blog LogRocket

18 червня 2020 р. 9 хв. Читання 2534

зменшення

Незважаючи на те, що сьогодні у нас швидші комп’ютери та мобільні пристрої, ми як розробники повинні думати про аудиторію, для якої ми будуємо продукт в цілому. Не кожен має доступ до одного типу швидких пристроїв або знаходиться в найшвидшій мережі Інтернет. Отже, ми повинні мати більш широкий погляд на проблеми з продуктивністю. Ефективність може бути досягнута різними способами, але в цій статті ми зосередимося на фронтенд-ефективності. Ми розглядаємо цей аспект уважніше і пропонуємо можливі вдосконалення в цій галузі.

Продуктивність на передній панелі

Оптимізація продуктивності інтерфейсу є критично важливою, оскільки на неї припадає близько 80-90% часу відгуку користувача. Отже, коли користувач чекає завантаження сторінки, приблизно 80-90% часу припадає на пов'язаний з інтерфейсом код та активи. На малюнках нижче показано співвідношення зовнішніх/серверних ресурсів, які потрібно завантажити для LinkedIn.

Джерело: http://www.stevesouders.com/

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

Якщо ми подивимося історичні дані, то побачимо, що файли JavaScript у 2010 році становили в середньому 2 КБ. Але з розвитком JavaScript, введенням нових бібліотек JavaScript, таких як Angular або React, та концепцією односторінкових додатків, середній розмір активів JavaScript збільшився до 357 КБ у 2016 році. Нам потрібно використовувати ці нові технології для кращих рішень. Але нам також потрібно розглянути можливі шляхи підвищення їх продуктивності, наприклад, зменшивши загальний розмір пакета JavaScript. Але перед тим, як заглибитися в цю тему, нам слід ознайомитись із наборами JavaScript. Які вони саме?

Набори JavaScript

Для запуску вашої програми інтерфейсу потрібна купа файлів JavaScript. Ці файли можуть бути у форматі внутрішньої залежності, як файли JavaScript, які ви написали самі. Вони також можуть бути зовнішніми залежностями та бібліотеками, які ви використовуєте для побудови свого додатку, наприклад React, lodash або jQuery. Отже, щоб ваша сторінка завантажилася вперше, ці файли JavaScript повинні бути доступними для програми. Тож як ми їх викриваємо?

Раніше спосіб викриття файлів JavaScript був набагато простішим. Для більшості веб-сторінок не потрібно було багато ресурсів JavaScript. Оскільки ми не мали доступу до стандартного способу отримання залежностей, нам довелося покладатися на використання глобальних залежностей. Уявіть, що нам потрібен як jQuery, так і main.js та other.js, які містять всю логіку нашого додатка JavaScript. Спосіб, яким ми змогли викрити ці залежності, виглядав приблизно так:

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

Як ми бачимо, управління такою структурою коду в масштабі швидко стало б безладом. Але через деякий час з’явилися кращі рішення для управління цим у додатках. Наприклад, якщо ви використовували NodeJS, ви могли б покластись на власну модульну систему NodeJS (на основі специфікацій commonJS). Це дозволить вам використовувати функцію require для отримання залежностей. Отже, у середовищі Node наш наведений вище фрагмент коду буде виглядати приблизно так:

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

  • Поділ ресурсів JavaScript на окремі файли вимагає багато запитів HTTP, коли різні частини програми вимагають різних залежностей. Це не буде ефективним і займає багато часу
  • Крім того, NodeJS require є синхронним, але ми хочемо, щоб він був асинхронним і не блокував основний потік, якщо актив ще не завантажений

Отже, найкращим підходом є розміщення всього коду JavaScript в одному файлі JavaScript та обробка всіх залежностей у ньому. Ну, це основна робота пакета JavaScript. Хоча різні пакети можуть мати різні стратегії для цього. Давайте розглянемо це трохи далі і побачимо, як пакет досягає цього. Тоді ми побачимо, чи є додаткові вдосконалення, які ми можемо зробити, щоб досягти меншого розміру набору та, отже, більшої продуктивності. Для цілей цієї статті ми використовуватимемо Webpack як пакет, що є одним із найвідоміших варіантів.

Ми зробили власну демонстрацію для .
Насправді ні. Клацніть тут, щоб перевірити .

Створення зразкового набору за допомогою Webpack

Почнемо з налаштування простого проекту Webpack. Ми збираємось використовувати основні пакети для запуску простого проекту веб-додатків. React, ReactDOM як фреймворк інтерфейсу, SWC як швидша альтернатива Babel для транпіляції, а також серія інструментів і завантажувачів Webpack. Ось як виглядатиме наш package.json:

Нам також знадобиться webpack.config.js, який є точкою входу конфігурації для наших команд Webpack. У цьому файлі є кілька варіантів, але давайте пояснимо кілька важливих:

  • режим - це можливість для Webpack дізнатися, чи слід робити оптимізацію, виходячи з опції, якій він передається. Ми обговоримо це далі пізніше
  • вихід - Цей параметр повідомляє Webpack, де він повинен завантажувати або розміщувати зібрані пакети на кореневому рівні. Він бере як шлях, так і ім'я файлу
  • HTMLWebpackPlugin - Ця опція допомагає нам полегшити обслуговування наших файлів HTML за допомогою пакета Webpack
  • навантажувачі - ці доповнення навантажувача допоможуть вам перетворити більшість сучасних функцій мови кодування в зрозумілий код для всіх браузерів