#webpack #bundle #browserify
#webpack #связка #browserify
Вопрос:
Я понимаю, что объединение позволяет извлекать меньше файлов зависимостей с сервера. Однако, если размер файла этого одного связанного файла зависимостей совпадает с размером файлов, входящих в комплект. Почему это должно быть быстрее?
Я читал о концепции разделения пакетов, но разве нам не нужно указывать пакет в основном HTML-файле (который, как я понимаю, является страницей, на которую пользователь впервые попадает)?
(Прошу прощения, если вопрос не очень хорошо сформулирован. Я очень смущен всей концепцией объединения и не знаю, как сделать вопрос более конкретным.)
Ответ №1:
Преимущества объединения
Минимизация
Несмотря на то, что вы можете сократить свой код, даже если он не входит в пакет, объединение вашего кода позволяет значительно сократить его, что, в свою очередь, приводит к более быстрому времени загрузки.
Допустим, у вас есть два файла, file1.js и file2.js . file1.js использует глобальную функцию из file1.js .
Для сокращения файлов по отдельности требуется, чтобы имена функций в file1 и file2 оставались неизменными, потому что минификатор не мог знать, в каком режиме была вызвана функция file2 (если она была уменьшена) во время сокращения file1 .
Объединение файлов и их минимизация, с другой стороны, позволяет минификатору переименовывать каждое вхождение функции или переменной, что делает ваш код намного меньше.
Кроме того, как сказал @gauraysingh, объединитель может удалять неиспользуемый код, такой как функции. Допустим, вы используете jQuery в своем приложении. Когда вы объединяете свой код, компилятор и минификатор могут удалить все неиспользуемые методы jQuery, что означает, что вы значительно сэкономите на размере файла.
Меньше HTTP-запросов
Выполнение всего одного HTTP-запроса к вашему связанному коду выполняется быстрее и использует меньше данных, чем выполнение нескольких запросов.
Комментарии:
1. Является ли использование меньшего количества данных для HTTP-запросов для объединенного кода результатом других преимуществ объединения, таких как минимизация?
2. @qsi14 отчасти из-за других преимуществ, а отчасти потому, что меньшее количество HTTP-запросов означает меньшее количество HTTP-рукопожатий и, следовательно, это занимает меньше времени
Ответ №2:
Если ваше приложение javascript имеет только одну сборку, тогда весь ненужный код загружается даже при загрузке первой страницы. мы можем использовать асинхронные возможности, предоставляемые js, и загружать фрагменты (модули, созданные в результате разделения кода) по требованию. Предположим, что на моей первой странице есть только некоторая информация, а также я показываю всплывающее окно при нажатии какой-либо кнопки на второй странице, тогда мне не нужно вызывать код pop вместе с первой страницей, но я могу загрузить этот всплывающий пакет в будущем на любой условной основе. В дополнение к этому, конечно, наш пакет должен быть уродливым, уменьшенным и сжатым.