Удаление неиспользуемого кода

Npm упрощает добавление кода в проект. Но так ли уж нужны все эти лишние байты?

Available in: Español, 日本語, 한국어, Português, 中文, English
Appears in: Ускорение загрузки
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Содержание

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

Анализ пакета #

С помощью DevTools можно легко узнать размер сетевых запросов:

  1. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).
  2. Перейдите на вкладку Сеть.
  3. Установите флажок Отключить кеш.
  4. Перезагрузите страницу.
Панель «Сеть» (Network) с запросом пакета

Вкладка Покрытие (Coverage) в DevTools также сообщает, какое количество CSS- и JS-кода в приложении не используется.

Покрытие кода в DevTools

Указав полную конфигурацию Lighthouse через Node CLI, с помощью аудита «Неиспользуемый JavaScript» (Unused JavaScript) можно отслеживать, какое количество неиспользуемого кода поставляется с приложением.

Аудит «Unused JavaScript» в Lighthouse

Если в качестве упаковщика вы используете webpack, то разобраться в том, что входит в комплект, вам поможет Webpack Bundle Analyzer. Добавьте этот плагин в файл конфигурации webpack обычным образом:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

Webpack обычно используется для одностраничных приложений. Но и в других сборщиках (например, Parcel и Rollup) тоже есть инструменты визуализации, которые пригодятся для анализа пакета.

При перезагрузке приложения с добавленным плагином отображается масштабируемая древовидная карта всего пакета.

Webpack Bundle Analyzer

Эта визуализация позволяет определить, какие части пакета больше других, а также получить представление обо всех импортируемых библиотеках. Таким образом можно определить, есть ли у вас неиспользуемые или ненужные библиотеки.

Удаление неиспользуемых библиотек #

На предыдущем изображении древовидной карты довольно много пакетов в одном домене @firebase. Если вашему сайту нужен только компонент базы данных firebase, то обновите настройки импорта и получите эту библиотеку:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Помните, что для более крупных приложений этот процесс будет значительно сложнее.

Если вам попадется загадочный пакет, который, казалось бы, нигде не применяется, посмотрите, какие из зависимостей верхнего уровня его используют. Попробуйте импортировать из этого пакета только нужные компоненты. Если библиотека не используется, удалите ее. Если библиотека не нужна для начальной загрузки страницы, попробуйте отложить ее загрузку.

Если вы используете webpack, просмотрите список плагинов, которые автоматически удаляют неиспользуемый код из популярных библиотек.

Удаление ненужных библиотек #

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

Производительность
Последнее обновление: — Улучшить статью
Return to all articles
Поделиться