Пять визуальных решений для анализа узких мест производительности упаковки webpack

предисловие

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

Что касается оптимизации, то есть несколько основных правил:

Сначала знайте, что оптимизировать;
Оптимизировать для оптимизируемой точки;
Измеряйте влияние на проект до и после оптимизации;

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

1. Измерение времени сборки

Первым шагом в оптимизации скорости сборки веб-пакета является знание того, на чем сосредоточить свои усилия. мы можем пройтиspeed-measure-webpack-pluginИзмерьте время, затрачиваемое на различных этапах сборки веб-пакета:

Шаг 1. Установите плагин для измерения скорости.

npm install speed-measure-webpack-plugin --save-dev

Шаг 2: Конфигурация

// 分析打包时间
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig)

Он может:

Проанализируйте общую трудоемкость всего пакета;
Трудоёмкая ситуация с каждым плагином и загрузчиком;

Разработчикам удобно найти узкое место упаковки, отнимающее много времени.

Содержимое пакета анализа

webpack-bundle-analyzer сканирует пакеты и визуализирует их внутреннее содержимое. Используйте эту визуализацию, чтобы найти большие или ненужные зависимости.

Шаг 1: Установите webpack-bundle-analyzer

npm install webpack-bundle-analyzer --save-dev

Шаг 2: Конфигурация

// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 开启 BundleAnalyzerPlugin
    new BundleAnalyzerPlugin(),
  ],
};

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

Примечание: webpack4 находится вproductionВключено по умолчанию в средеModuleConcatenationPlugin(предварительно компилирует все модули в одно замыкание, ускоряя выполнение кода в браузере), он может объединять части модулей в выводе webpack-bundle-analyzer, делая отчет менее подробным. Если вы используете этот плагин, отключите его на время анализа. Настройки следующие:

module.exports = {
  // ...
  optimization: {
    // 
    concatenateModules: false,
  }
};

В частности, использование webpack-bundle-analyzer может визуально отражать:

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

3. Инструменты онлайн-анализа

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

1. Создать файл статистики`stats.json`

При компиляции исходного кода с помощью веб-пакета пользователь может создать файл JSON, содержащий статистику о модуле. Эту статистику можно использовать для анализа графа зависимостей приложения и для оптимизации скорости компиляции. Обычно файл создается следующим образом:

--profile --json > stats.json,Например:

webpack --config webpack.config.prod.js --profile --json > stats.json

--profile: Запишите отнимающую много времени информацию в процессе строительства
--json: вывод результата сборки в формате JSON и вывод только одного в конце..jsonфайл, этот файл (stats.json) включает всю информацию, связанную со сборкой
> stats.json: это команда канала в системе UNIX/Linux, означающая поместитьwebpack --profile --jsonВыходной контент передается вstats.jsonв файле

После выполнения команды в проекте появится еще однаstats.jsonфайл, следующийstats.jsonФайлы были загружены в следующие онлайн-инструменты для визуализации состава пакета анализа.

Общие онлайн-инструменты включают в себя:

Официальный инструмент визуального анализа Webapck Analyse: создайте диаграмму, позволяющую визуально понять зависимости проекта, размер модуля и временные затраты;
Webpack Visualizer: создайте круговую диаграмму для визуализации содержимого пакета;
Помощник по оптимизации пакета webpack: этот инструмент анализирует ваш пакет и предлагает действенные улучшения для уменьшения размера пакета.

2. Официальный инструмент визуального анализа Webapck Analyze

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

ОткрытьWebapck Analyse, загрузитьstats.json:

Webpack Analyze не принимает ваш выборstats.jsonФайл отправляется на сервер, но анализируется локально в браузере, для этого вам не нужно беспокоиться о утечке вашего кода. После выбора файла у вас сразу будут следующие рендеры:

Modules: Показать все модули, каждый модуль соответствует файлу. И он также включает график зависимости между всеми модулями, путь к модулю, идентификатор модуля, чанк, к которому принадлежит модуль, и размер модуля;

Chunks: Показать все блоки кода, блок кода содержит несколько модулей. А также содержит идентификатор, имя, размер блока кода, количество модулей, которые содержит каждый блок кода, и график зависимости между блоками кода;

Assets: Показать все ресурсы выходного файла, включая.js,.css, картинки и т.д. А также имя файла, размер, из какого блока кода взялся файл;

Warnings: отображает все предупреждающие сообщения, которые появляются в процессе сборки;

Errors: отображать все сообщения об ошибках в процессе сборки;

Hints: показывает время, затраченное на обработку каждого модуля.

3. Инструмент анализа визуализатора Webpack

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

Он доступен как плагин и онлайн и является более новым инструментом.

Способ 1: использовать в качестве плагина

npm install webpack-visualizer-plugin --dev-save

Конфигурация:

// 分析包内容
const Visualizer = require('webpack-visualizer-plugin');
module.exports = {
  plugins: [
    // 开启 Visualizer
    // 默认输出为 stats.html，这里为 statistics.html
    new Visualizer({
      filename: './statistics.html'
    })
  ],
};

Затем откройте его прямо в браузере.statistics.htmlВы можете увидеть результаты анализа:

Способ 2: онлайн-использование

ОткрытьКрис Bateman.github.io/webpack-vis..., загрузитьstats.jsonВы можете ознакомиться с результатами анализа.

4. Вспомогательный инструмент анализа оптимизации пакета webpack

Открытьwebpack.jakoblind.no/optimize/, загрузитьstats.jsonВы можете увидеть результаты анализа и предложения по оптимизации:

4. Резюме

Итого, мы представляем следующее5инструменты измерения, каждый из которых предлагает разные точки зрения на анализ упаковки, такие как:

Во время разработки, при введении новых пакетов в проект, я лично много использую Webpack Visualizer, и круговая диаграмма дает мгновенную обратную связь о пропорциях размера;
При анализе трудоемкости каждой версии сборки по сравнению с другими4середина,speed-measure-webpack-pluginВозможность получить требующую много времени информацию о каждом плагине и загрузчике, что поможет вам сосредоточиться на плагинах, которые необходимо оптимизировать;
webpack-bundle-analyzerСодержание пучка может быть показано как удобное, интерактивное, масштабируемое графическое дерево;
Webpack Analyze относительно других4Умеет проводить всесторонний анализ упаковки;
по сравнению с другими4, помощник по оптимизации пакета webpack может предоставить действенные предложения по улучшению;

5. Прошлая серия вебпаков

Лучшее руководство по настройке для веб-пакета

Принцип снупинга: написание сборщика JavaScript от руки

Если вы считаете, что это хорошо, поставьте лайк! 👍👍👍

Хотите увидеть предыдущую серию статей,Нажмите, чтобы перейти на домашнюю страницу блога github.

6. Идти до конца

❤️ Получайте удовольствие, продолжайте учиться и всегда продолжайте программировать. 👨💻
Если у вас есть какие-либо вопросы или уникальные идеи, добро пожаловать в комментарии или свяжитесь с бутылкой напрямую (отсканируйте код, чтобы подписаться на официальный аккаунт, и ответьте на 123)! 👀👇
👇Приглашаем обратить внимание: джентльмен с бутылкой переднего плана, обновляется ежедневно! 👇