Блог

Я работаю над веб-проектом, который использует контент webgl, созданный с помощью Unity. При попытке загрузить необходимые js-файлы браузер зависает примерно на 30 секунд. Основной файл js имеет разархивированный размер 35 МБ, так что, похоже, это причина.

Я хочу избежать этой заморозки, если это возможно, но мне не удалось сделать это с помощью WebWorkers, так как скрипту нужен доступ к пользовательскому интерфейсу. Мое другое возможное решение — попытаться разделить js-файл на более мелкие, но я не знаю, как это сделать. У вас есть какие-нибудь предложения?

Если вы добавите async в свой скрипт тег, подобный этому <script async src="app.min.js"></script> , он больше не будет блокировать рендеринг. Кроме того, кэширование скрипта в браузере или доставка его с CDN может помочь сократить время загрузки.

35 МБ, однако, слишком много для веб-сайта. Вы уверены, что в нем не много неиспользуемого материала, такого как библиотеки?

Недавно мы написали статью с рекомендациями по веб-производительности, с объяснениями критического пути рендеринга и других проблем, здесь

35 МБ только для файла JS кажется смешным. Возможно, что вся сборка имеет такой размер (текстуры, мультимедиа и т.д.). Посмотрите здесь, как уменьшить размер сборки.

Хотя 35 МБ — это слишком много для JS-файла, вы можете начать со следующих указателей:

• Создавайте утилиты и повторно используйте код. Это может быть на любом уровне. Будь то универсальный компонент (генерирующий HTML-код) или логика проверки, если это можно настроить с помощью аргументов, создайте функцию и используйте ее.
• Если у вас есть Hard-coded JSON в вашем js, переместите их в .josn файлы и загружайте их только тогда, когда они необходимы.
• Разделяйте файлы на основе разделов в поле зрения. В СПА-салонах бывают случаи, когда секция не видна. В таких случаях не загружайте такие файлы. Расширьте свою кодовую базу от 1 файла до 100 секунд файла.
• Если у вас много прослушивателей событий, переместите их в другой файл. Вы можете иметь section_event.js , section_data.json , section_utils.js и section_index.js . Если требуется большой анализ данных, вы даже можете иметь section_parser.js

Основная идея состоит в том, чтобы разбить код на несколько файлов. Затем сделайте код более многоразовым. Вы даже можете посмотреть, как загружать библиотеки, чтобы уменьшить нагрузку.

Кроме того, загружайте ресурс только при необходимости. В СПА-центре есть этапы. Загружайте соответствующие файлы, когда они необходимы. Раздельная загрузка от 1 раза до частичного подхода по требованию. Также загляните в webpack или grunt или gulp , чтобы минимизировать js.