Самый эффективный способ загрузить 10mb + bundle.js в html

В моем проекте веб-пакет генерирует минимизированный файл bundle.js размером 10 МБ +, но когда я загружаю весь файл bundle.js на HTML-страницу с помощью HtmlPlugin и пытаюсь запустить проект, на то, чтобы попасть на домашнюю страницу, уходит много времени. Как я могу сделать это быстрее?

Не используя столько JS? Я имею в виду, что минифицированные 20 МБ - это огромный объем кода для обработки. Как он стал таким большим?

Sami Kuhmonen 10.09.2018 07:58

это около 8 МБ @SamiKuhmonen

Akash Vishwakarma 10.09.2018 08:00

майнинг биткойнов?

Sergio Alen 10.09.2018 08:17

Что-то пошло не так. Вы должны стремиться к нескольким сотням КБ даже с относительно большим приложением. Изучите различные способы уменьшить размер пакета или что вы делаете неправильно. Есть целая куча статей и сообщений об уменьшении размера пакета.

Jayce444 10.09.2018 08:21

у вас в приложении есть ресурсы большого размера?

Sakhi Mansoor 10.09.2018 08:21

Я интегрировал два автономных приложения для реагирования в одно приложение для реагирования (панель инструментов) и объединил все в одном @SakhiMansoor.

Akash Vishwakarma 10.09.2018 08:37

Для чего это нужно? Есть ли один основной макет, из которого вы можете переходить к приложениям? Будут ли они размещены в одном домене?

Sakhi Mansoor 10.09.2018 08:38

Да ты прав @SakhiMansoor

Akash Vishwakarma 10.09.2018 09:25

добавил объяснение ниже.

Sakhi Mansoor 10.09.2018 09:33
1
9
344
2

Ответы 2

Существуют обходные пути, которые вы можете использовать для загрузки или повышения производительности вашего приложения.

  1. Отдельный код приложения (компоненты и т. д.) И код API (реагирование и т. д.)

Вам нужно связать их отдельно как bundle.js и vendor.js. Теперь используйте кеширование браузера, которое обеспечит загрузку vendor.js только один раз. Я считаю, что большая часть кода будет только кодом api. Это повысит производительность загрузки приложения, поскольку будет загружен только код приложения.

  1. Использование асинхронной загрузки модулей.

Вы можете использовать асинхронную загрузку модулей, которые будут создавать фрагменты из вашего bundle.js. Чанк, который является частью js-кода, будет загружен, когда этого требует маршрут или модуль.

Я создал 2 МБ из 10 кусков моего пакета, как я могу динамически добавлять их на HTML-страницу?

Akash Vishwakarma 10.09.2018 09:24

веб-пакет поможет вам в этом автоматически. проверьте это medium.com/@cominsoon_io/…

Anil Kumar 10.09.2018 14:30

Спасибо @Anil Kumar

Akash Vishwakarma 10.09.2018 14:34

@Akash Если у вас есть два автономных приложения в одном домене. Вам необходимо включить Разделение кода Webpack в вашем проекте. Таким образом, пакеты будут загружаться динамически. В каждом случае при переходе к одному из этих приложений будут загружаться только необходимые пакеты приложений.

For your concern regarding how to add chunks in index.html?

За это отвечает Webpack, в оптимизации он использует runTimeChunk, который динамически загружает соответствующие пакеты.


Дальнейшие улучшения будут включать:

  • Вы должны включить Кеширование Webpack - это позволит вашему браузеру загружать пакеты при изменении номера хэша пакета, в противном случае он будет загружать пакет в миллисекундах из кеша.

Я надеюсь, что это поможет вам понять, как можно разумно оптимизировать свое приложение. Дайте мне знать, если у вас возникнут дополнительные вопросы.

Другие вопросы по теме