Определить начальный размер пакета страниц программно
Моя команда написала веб-приложение с create-react-app и мы хотим сохранить небольшой размер пакета для начальной загрузки страницы. Прямо сейчас мы просто бежим gzip а также wc на выведенных файлах JavaScript в build/ чтобы получить представление о размере пакета в целом (аналогично выводу react-scripts build), но этого недостаточно для того, чтобы сообщить нам размер всех пакетов, необходимых для начальной загрузки страницы.
А пока я планирую рассчитывать на разбор build/index.html и нахождение того, какие теги сценариев ссылаются на абсолютные пути (чтобы избежать подсчета сторонних сценариев), чтобы определить, какие чанки загружаются при начальной загрузке страницы, хотя я действительно задаюсь вопросом, возможно ли загрузить код на стороне javascript, что было бы важно для начальной краски. Я так не думаю, но я также не понимаю, как CRA работает достаточно, чтобы сказать это окончательно.
Мой товарищ по команде также думает, что, может быть, нам следует просто загрузить целевую страницу в браузере без головы и определить, какие скрипты загружаются при загрузке страницы таким образом, хотя было бы неплохо иметь более легкий способ сделать эту проверку, чем эта.
Заранее спасибо!
1 ответ
Простой синтаксический анализ вывода html не будет работать, если ваша точка входа содержит лениво загруженный фрагмент (либо с использованием React.lazy или аналогичный метод).
С помощью этого PR вы можете анализировать, используя вывод JSON из webpack, передав--stats к build сценарий: yarn build --stats (если вы используете npm не забывайте использовать -- для пересылки флага во внутренние скрипты: npm run build -- --stats)
Это создаст build/bundle-stats.jsonкоторые вы можете напрямую импортировать в скрипт nodejs. Он содержит список блоков, выводимых из webpack, и его граф зависимостей.
Единственная альтернатива, о которой я могу думать, - это использовать кукловод, но он больше подходит для измерения пользовательских показателей, таких как время до интерактивности. Я бы предложил использовать простые скрипты узлов для любого измерения времени сборки.