#javascript #reactjs #web #webpack
#javascript #reactjs #веб #webpack
Вопрос:
У меня возникли некоторые проблемы со скоростью загрузки моего проекта на React. Я тестирую его в Google PageSpeed и выглядит очень печально.
Рейтинг скорости страницы в Google
Основная проблема, на мой взгляд, заключается в размере chunk.js файла.
Размер файла Chink
Я пытался использовать React Lazy, чтобы увеличить скорость загрузки, но значение было очень низким. Может быть, кто-нибудь может помочь мне это исправить. Я использую React (без Redux) для этого проекта и несколько библиотек, самые большие из них — Antd, Stripe и Google Analytics. Серверная часть работает на Node / Express Psql, хост: Дженкинс.
Ответ №1:
возможно, вы могли бы более подробно рассказать, почему ваш пакет такой большой.
- Вы используете пользовательскую конфигурацию webpack или CRA?
- Вы измеряете производительность производственной сборки?
- Вы добавляете изображения в свой JS? Это может увеличить объем вашего пакета.
Я также вижу, что вы не упомянули React router, поэтому я полагаю, что вы не разбиваете код по маршрутам, если они у вас есть, если нет, то взгляните на ваши node_modules и изображения.
Что вы можете сделать для улучшения, так это разделить ненужные пакеты, которые могут загружаться с задержкой либо при посещении определенной страницы, либо при взаимодействии. Вам не нужен GA при начальной загрузке страницы. Я бы сказал то же самое для Stripe, только на странице оформления заказа.
Вы можете разделить код, используя функцию динамического импорта (должна быть включена babel). Webpack предоставляет довольно хороший учебник.
https://webpack.js.org/guides/code-splitting/
Также взгляните на эту статью: https://webpack.js.org/guides/lazy-loading /