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

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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