В одном из моих проектов одностраничных приложений я заметил значительное увеличение размера пакета webpack. Я твердо уверен, что все время от времени сталкиваются с одной и той же ситуацией. В лихорадочных условиях разработки это всего лишь вопрос времени, когда ваш рабочий код достигнет размера 5 мегабайт или более.
Вы начали разработку крошечного проекта, но всего за пару месяцев он превратился в супер-огромные пакеты. Знаете, это всегда одна и та же история. :)
Каждый раз, когда я настраиваю себя для нового одностраничного приложения, я регулярно обращаюсь к инструменту начальной загрузки под названием create-response-app (CRA), чтобы заложить основу для моего проекта. Это прекрасная технология - просто название для меня немного вводит в заблуждение и сбивает с толку. Однако в индустрии программного обеспечения, особенно в мире JS, нам трудно правильно называть вещи. Любой постоянный пользователь высокоуровневой библиотеки автоматизации браузера под названием - держитесь, пожалуйста - NIGHTMARE может часами говорить об этом.
К счастью, есть одно простое решение, позволяющее узнать, что входит в ваш пакет.
Классическое приложение create-react-app
С классическим приложением create-react-app довольно легко получить подробную информацию о размере вашего пакета.
Просто следуйте инструкциям здесь:
https://create-react-app.dev/docs/analyzing-the-bundle-size/
Короче:
Просто добавьте новый инструмент под названием «source-map-explorer» в node_modules. Затем запустите сценарий, чтобы сгенерировать и визуализировать результат.
Затем проведите проверку, просмотрев графики, чтобы найти проблему.
Например, это мой маленький проект:
Самое замечательное в результатах - то, что вы получаете их в виде отдельного файла. Вы можете просто взять сгенерированный файл и отправить его своему коллеге по электронной почте / slack / как угодно. Затем он легко открывает его в браузере, чтобы получить отличный обзор, что не так с пакетом.
Конечно, с моим проектом, как обычно, сначала не получилось :) В моей производственной сборке генерация исходных карт была отключена. После включения я наконец получил результат, который четко указывал на содержимое пакета, и я мог быстро определить виновника.
Отклоненное приложение
Для одного из своих приложений я отказался от приложения, чтобы поддерживать удивительные и, по тем временам, экспериментальные функции Typescript. Оглядываясь назад, я не думаю, что это был хороший ход, но ущерб был нанесен.
На самом деле инструмент «create-react-app» защищает вас почти полностью от беспорядка webpack, babel и многих других инструментов, которые доставляют удовольствие использовать в современной клиентской разработке. Всегда задаваясь вопросом, как выглядит внутренняя обстановка CRA, я воспринял это включение экспериментальных функций как предлог, чтобы удовлетворить свое интеллектуальное любопытство.
Как и следовало ожидать, это сделало мою жизнь слишком трудной . :)
Таким образом, если вы, как и я, сделали жирный ход, вы могли столкнуться с проблемой с получением данных статистики веб-пакетов. Я пробовал несколько способов справиться с этим, но единственный, который, похоже, работает, - это использование «webpack-visualizer-plugin.».
https://www.npmjs.com/package/webpack-visualizer-plugin
«плагин webpack-visualizer»: «⁰.1.11»,
Чтобы включить его, вы должны добавить пакет в package.json, а затем запустить свой любимый менеджер пакетов (npm или yarn). Затем измените конфигурацию веб-пакета - путь «ваше приложение \ config \ webpack.config.js»
В начало файла прикрепите следующий код:
var Visualizer = require(‘webpack-visualizer-plugin’);
И следующий код в раздел Плагин (код)
new Visualizer(),
Это классический плагин для веб-пакетов. Однако имейте в виду, что файл webpack.config.js немного беспорядочный. Поэтому добавьте код в свойство подключаемого модуля module.exports.
Как вы можете видеть здесь:
Отныне ничто не мешает вам получить отчет. Начните с запуска вашей производственной сборки. После сборки вы увидите новый файл с именем stats.html. Это отдельный файл HTML, который необходимо проверить. Просто откройте его в своем браузере, и вуаля, содержимое вашего пакета раскроется довольно кратко и ясно.
Примечание: вот что вы делаете для установки без create-response-app (вы просто запускаете):
webpack — profile — JSON > compilation-stats.json
А затем загрузите сгенерированный файл на этот сайт:
Хотите узнать больше о статистике веб-пакетов? Посмотрите эту ссылку:
Https://webpack.js.org/api/stats/.
Есть прекрасное объяснение того, что содержится в выходном файле stats.json. Я настоятельно рекомендую вам прочитать его, чтобы получить больше информации. Это определенно окупится при отладке и настройке ваших пакетов.
Подводя итог, получение и чтение анализа - это простая задача. Конечно, удаление раздутого кода уже не такая уж простая задача. Я собираюсь поделиться всеми своими приемами и советами по уменьшению размера пакета в следующем сообщении блога.
