Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Анализ пакета
  • Удаление неиспользуемых библиотек
  • Удаление ненужных библиотек

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

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

Nov 5, 2018
Available in: English, Español, Português, 中文, 日本語 и 한국어
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, просмотрите список плагинов, которые автоматически удаляют неиспользуемый код из популярных библиотек.

Попробуйте

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

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

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

Производительность
Последнее обновление: Nov 5, 2018 — Улучшить статью
Codelabs

See it in action

Learn more and put this guide into action.

  • Remove unused code
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.