Сборка производства слишком велика

Question

В моем приложении реакции, созданном с использованием create-react-app, окончательная производственная сборка содержит 2,3 МБ файла JS и 300 КБ файла CSS (очень мало CSS).

Когда я запускаю команду npm run buildкоторый использует react-scripts для показа сборки, которая использует оптимизированную сборку для производства.

Я даже пытался принудительно заставить его с помощью npm run build --env=production, все тот же неоптимизированный вывод.

то, что мне не хватаетis uglifyjs и `минификация JS-файлов не выполняется, как я вижу, мои js-файлы не являются min.js.

Кроме того, в окончательном выводе говорится, что он сжал gzip и его размер составляет около 400 КБ js-файла, если это так, как мне обслуживать мои файлы для улучшения оптимизации.

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

Answer 1

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

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

Все это при правильном выполнении может значительно снизить начальное время загрузки приложения реагирования.

Здесь вы можете найти, как реализовать разбиение кода