Если вы создаете приложение React + Redux, связанное с бизнесом, размер вашего приложения постепенно увеличивается с появлением новых функций и разработок. В моем случае он достиг 10,6 МБ😱.
Выполнив несколько простых шагов, ничего не меняя в коде, я смог уменьшить размер сборки на 80%.
Я работал над проектом долгое время, и постепенно размер пакета увеличивался, а я этого не замечал. Однажды я пытался войти в свое мобильное приложение с небольшим медленным интернетом и был шокирован, увидев, что первая страница загружается слишком долго. Тогда я решил улучшить загрузку.
Мы использовали React для интерфейса. Я проверил, что размер пакета составляет 10,6 МБ. Да, 10,6 МБ, это означает, что если вы перейдете на нашу страницу, в вашем браузере загрузится 10,6 МБ (это страшно). Мы использовали AWS CDN для сжатия файла в gzip, но верхний предел CDN для сжатия файла составляет 10 МБ, в моем случае CDN не сжимал файл, потому что общий размер сборки составлял 10,6 МБ.
Я установил source-map-explorer, чтобы проанализировать, какая часть занимает много места.
npm install - сохранить исходную карту-проводник
npm запустить сборку
npm запустить анализ
Я заметил, что около 70% места занимает node_modules, потому что мы использовали много библиотек. Первое решение пришло мне в голову, чтобы удалить некоторые библиотеки, но я не могу удалить, потому что все уже используются. Я начал искать другие способы уменьшить размер сборки и обнаружил, что мы можем использовать некоторую часть кода.
Мы использовали начальные версии create-response-app (CRA) и CRA из версии 2, делает для вас плевание кода, что означает, что ваш окончательный файл пакета после запуска npm run build будет разделен на несколько файлов .
Я только что создал свое интерфейсное приложение с последней версией CRA и создал размер пакета. Результат был потрясающим: не только разделил файл пакета на два файла по 5 и 3 МБ, но и уменьшил общий размер. И когда я обновил свое приложение новой сборкой после сжатия AWS CDN, окончательный размер составил 1,4 МБ и 566 КБ. Это означает, что я мог бы уменьшить размер сборки примерно на 80%, просто обновив версию CRA.
