Определить начальный размер пакета страниц программно - PullRequest
0 голосов
/ 08 июля 2019

Моя команда написала веб-приложение с create-react-app, и мы хотим, чтобы размер пакета был небольшим для начальной загрузки страницы.Прямо сейчас мы просто запускаем gzip и wc в выводимых файлах javascript в build/, чтобы получить представление о размере пакета в целом (аналогично выводу react-scripts build), но это не такдостаточно подробный, чтобы сообщить нам размер всех пакетов, которые требуются для начальной загрузки страницы.

Сейчас я планирую рассчитывать на синтаксический анализ build/index.html и нахождение того, какие теги сценария ссылаются на абсолютные пути (кизбегайте подсчета сторонних сценариев), чтобы определить, какие чанки загружаются при начальной загрузке страницы, хотя я действительно задаюсь вопросом, возможно ли загрузить код на стороне javascript, что было бы важно для начальной рисования.Я так не думаю, но я также не понимаю, как CRA работает достаточно, чтобы сказать это окончательно.

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

Заранее спасибо!

1 Ответ

1 голос
/ 08 июля 2019

Простой синтаксический анализ выходных данных html не будет работать, если ваша точка входа содержит ленивый загруженный блок (либо с использованием React.lazy, либо аналогичным способом).

С помощью этого PR вы можете анализировать, используя вывод JSON из веб-пакета, передавая --stats в build скрипт: yarn build --stats (если вы используете npm, не забудьте использовать -- для перенаправления флага во внутренние скрипты: npm run build -- --stats)

Это создаст build/bundle-stats.json, который вы можете напрямую импортировать в скрипт nodejs. Он содержит список чанков, выведенных из веб-пакета, и график его зависимостей

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...