На JavaScript: лучше иметь один большой файл или несколько файлов свете?

включение многих файлов javascript на одной странице может привести к низкой производительности. Я хочу спросить:: Лучше ли хранить отдельные файлы или включать все файлы в один файл javascript?

и если лучше включить все в один и тот же файл Javascript, как я могу избежать конфликтов между разными скриптами?

9
html javascript performance

4 ответов

лучше хранить отдельные файлы или включать все файлы в один файл Javascript?

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

если вы используете C#.Net + ASP.Net, вы можете bundle ваши файлы - это очень хороший способ для сжатия скриптов.

как я могу избегать конфликтов между различными сценариями?

можно использовать RequireJS; разными названиями это тоже хорошая идея; и каждый раз, когда плагин/скрипт заканчивается, используйте ; чтобы определить его конец.

Performatic рассмотрение

чтобы поддерживать производительность ваших скриптов, Вы должны minify них.

решение для одной страницы приложения

после того, как вы minified ваши скрипты, затем сгруппируйте их все-независимо от того, являются ли они плагинами или вашим собственным кодом - в один файл и вызовите его в своем приложении.

решение для многостраничного приложения

в этом случае вы должны вызвать только необходимый JavaScript для каждой страницы. как вы можете это сделать?

после того, как вы уменьшили все свои скрипты, затем отделите их в категории. Взгляните, чтобы получить идея:

/assets/js/core.js - здесь ты ставишь код код JavaScript, который необходим для всех ваших страниц. Это ваше ядро; ваше ядро;

/assets/js/plugins.js - здесь вы помещаете все плагины, которые работают со всеми вашими страницами (т. е. jquery, backbone, knockout и т. д.);

/assets/js/home/bootstrap.js - вот это волшебство: в этом файле вы должны заполнить код, который будет вызывать ваш дом;

/assets/js/contact/bootstrap.js - то же, что и раньше: этот файл вы должны разместить с кодом, который будет вызывать ваша контактная страница.

подсказка: ядра.js и Плагины.js может занимать тот же файл при развертывании приложения. Для лучшего понимания и разработки, хорошо поддерживать их в отдельных файлах.

сторонние плагины

чтобы дать вам представление, файл ваших плагинов должен быть таким:

/* PlaceHolder plugin | http://www.placeholderjs.com/ | by @phowner */
; $(function(){ /* the placeholder's plugin goes here. */ });

/* Masked Inputs plugin | http://www.maskedjs.com/ | by @maskedowner */
; $(function(){ /* the masked input's plugin goes here. */ });

/* Mousewheel plugin | http://www.mousewheeljs.com/ | by @mousewheelowner */
; $(function(){ /* the mousewheel's plugin goes here. */ });
9

обслуживает один большой один против нескольких небольших файлов зависит от нескольких факторов:

  • все клиенты требуют точно такой же базы кода?
    • т. е. нам, вероятно, не нужна прокладка для современных браузеров, так зачем ее обслуживать?
  • мы регулярно меняем эти файлы?
    • кэширование файлов, которые часто не меняются, можно использовать для уменьшения трафика
  • хотим ли мы использовать CDNs?
    • обслуживание jQuery из Нью-Йорка в Нью-Йорк, а не толкать его вокруг половины планеты, вероятно, ammortizes дополнительный HTTP-запрос (производительность по крайней мере)

конфликты можно уменьшить / устранить, введя свою собственную область для каждого сценария. Общий способ-использовать IIFEs / SIAFs и вводить необходимые переменные.

быстрый и простой пример IIFE:

(function () { // IIFE
    var undefined = true;
})();

if (document.querySelectorAll === undefined) {
    // polyfill
}

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

Примечание: обычно ваш polyfill не должен быть реализован в глобальной области.

1

конфликтующий код не имеет ничего общего с объединением JavaScript или помещением его в отдельные файлы, но он требует программирования спуска.

объединить или не объединить зависит от нескольких вещей, таких как:

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

обычно лучше связывать. Если вы используете Visual Studio, вы можете использовать пакет Web Essentials для JS, CSS и даже спрайтов изображений.

http://vswebessentials.com/features/bundling

0