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

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

Nov 5, 2018

Available in: English, Español, Português, 中文, 日本語, and 한국어

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

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

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

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

Панель «Сеть» (Network) с запросом пакета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Последнее обновление

Nov 5, 2018 — Улучшить статью

Return to all articles