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

Хуссейн Джирдех
Houssein Djirdeh

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

Влияние на основные веб-показатели

Удалив неиспользуемый код, вы можете улучшить основные веб-показатели вашего сайта. Например, на Largest Contentful Paint может влиять неиспользуемый код, когда неоправданно большие ресурсы конкурируют за пропускную способность с другими ресурсами. LCP также может быть затронут, если большие ресурсы JavaScript, которые отображают разметку только на клиенте , содержат ссылки на кандидатов LCP, задерживая загрузку этих ресурсов .

Неиспользуемый код также может повлиять на Interaction to Next Paint (INP) , поскольку даже неиспользуемый JavaScript должен быть загружен, проанализирован, скомпилирован и затем выполнен. Неиспользуемый код может вносить ненужные задержки во время загрузки ресурсов, использование памяти и активность основного потока, что приводит к плохой отзывчивости страницы.

В этом руководстве объясняется, как проанализировать кодовую базу вашего проекта на предмет неиспользуемого кода, а также предлагаются стратегии по удалению неиспользуемого кода из ресурсов JavaScript, которые вы отправляете своим пользователям в производство.

Проанализируйте свой пакет

DevTools может показать вам размер всех сетевых запросов:

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

Вкладка «Покрытие» в DevTools также показывает, какой объем кода CSS и JS в вашем приложении не используется.

Покрытие кода в DevTools
Вкладка «Покрытие».

Указав полную конфигурацию Lighthouse через Node CLI, вы можете запустить аудит Reduce unused JavaScript, чтобы отследить, сколько неиспользуемого кода поставляется с вашим приложением.

Lighthouse Уменьшить неиспользуемый отчет JavaScript
Сокращение неиспользуемого отчета JavaScript.

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

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

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

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

Анализатор пакетов Webpack
Вид древовидной карты Webpack Bundle Analyzer.

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

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

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

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

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

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

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

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