Каков наилучший способ организовать код JS для лучшей производительности?

Question

Я хотел бы узнать, каков наилучший способ организации кода JS.

В моем приложении есть зависимость jQuery и некоторые плагины, которые я использую на определенных страницах, например:

Потребности страницы 1:

- jquery
- magnific-popup
- autosize
- owl.carousel

Потребности страницы 2:

- jquery
- magnific-popup
- autosize
- photoswipe
- verlok
- tinyColorPicker
- ZebraDatePicker
- rangeslider
- dropzonejs

Потребности страницы 3:

- jquery
- magnific-popup
- verlok

Предпочтительнее использовать мега-пакет со всеми зависимостями изагрузить это на всех страницах.

или

Импортировать jQuery на все страницы и создать определенный пакет для каждой страницы?

или

Включить jQuery в определенныесвязать для каждой страницы и загрузить только один файл для каждой страницы?

Answer 1

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

Здесь вы можете увидеть более подробное обсуждение .

Answer 2

Вы можете создать пакет, содержащий зависимость, которая нужна всем страницам (jquery и увеличенное всплывающее окно), и создать отдельные пакеты для трех страниц, которые будут загружаться асинхронно при загрузке этой страницы.Это улучшит время загрузки страницы.Другая вещь, которую вы делаете, это предварительно получить пакеты.Что делает prefetch, так это загружает ресурсы в простое.Поэтому, когда вы загружаете новые ресурсы страницы, он уже будет загружен.

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

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