Объедините и уменьшите несколько файлов CSS / JS

Question

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

Моя страница ссылается на несколько файлов CSS и JS, например:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

В производственном выпуске я хотел бы объединить 3 CSS-файла в один и минимизировать его, например, с помощью. YUI Compressor . Но тогда мне нужно обновить все страницы, которым нужны эти 3 файла, чтобы они ссылались на недавно уменьшенный CSS. Это кажется подверженным ошибкам (например, вы удаляете и добавляете несколько строк во многих файлах). Любой другой менее рискованный подход? Та же проблема для файлов JS.

Answer 1

Check minify - он позволяет объединять несколько файлов js, css в один, просто складывая их в URL, например,

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

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

Answer 2

Я думаю, YUI Compressor - лучшее, что есть.Он минимизирует JS и CSS и даже лишает тех операторов console.log, которые люди используют для низкоуровневой отладки JavaScript.

Проверьте, насколько просто .

Вы можете запустить его в муравейной задаче и, следовательно, включить его в свой пост / предварительный коммит, если используете svn / git.

ОБНОВЛЕНИЕ: В настоящее время я использую grunt сconcat, минимизировать и увеличить вклады.Вы можете использовать его с наблюдателем, чтобы он создавал новые минифицированные файлы в фоновом режиме всякий раз, когда вы меняете свой источник.Uglify contrib не только удаляет журналы консоли, но и неиспользуемые функции и свойства.

См. это руководство для краткого понимания.

ОБНОВЛЕНИЕ: В настоящее время люди отступают от grunt и его предшественника "gulp" и используют npm в качестве инструмента для сборки.Читайте об этом здесь .

ОБНОВЛЕНИЕ: Так что теперь люди используют пряжу для запуска npm.Неудивительно;значок пряжи - кот.Большинство современных платформ используют webpack для объединения ресурсов в пакеты, что также обеспечивает minification .

Answer 3

Мне нужно обновить все страницы, которым нужны эти 3 файла, чтобы они ссылались на недавно уменьшенный CSS.

Во-первых, я бы сказал, что у вас должен быть общий заголовок.Так что не нужно менять все заголовки в любое время, когда это необходимо.Это хорошая практика, чтобы иметь один заголовок или 2-3.Так как ваша страница нужна, вы можете изменить свой заголовок.Поэтому, когда вы захотите расширить свое веб-приложение, оно будет менее рискованным и утомительным.

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

Answer 4

В итоге я использовал CodeKit для объединения моих файлов CSS и JS. Особенность, которую я считаю действительно полезной, - это возможность выполнять конкатенацию при сохранении файла; потому что он контролирует соответствующие активы CSS / JS. Как только я их правильно соединил, например, к 1 CSS-файлам и 1 JS-файлам, все остальные файлы просто могут ссылаться на эти 2.

Вы даже можете попросить CodeKit минимизировать / сжать на лету.

Отказ от ответственности: я никоим образом не связан с CodeKit. Я случайно нашел его в Интернете, и он послужил отличным инструментом в моем процессе разработки. Это также идет с хорошими обновлениями, так как я впервые использовал его больше года назад.

Answer 5

Быстрый совет для пользователей Windows, если вы хотите только объединить файлы:

Откройте cmd в нужном месте и просто передайте ваши файлы в файл, используя « type »

например:

type .\scripts\*.js >> .\combined.js

Если важен порядок ваших сценариев, вы должны явно указать файлы в нужном порядке .

Я использую этот в файле bat для моих проектов angular / bootstrap

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

Answer 6

Это 2015 год на улице и самый простой способ, которым ИМО использует gulp - http://gulpjs.com/. Сократить код с помощью gulp-uglify для сценариев js и gulp-minify-css для css очень просто. Глоток определенно стоит попробовать

Answer 7

Для людей, которые хотят что-то более легкое и гибкое, сегодня я создал js.sh для решения этой проблемы. Это простой инструмент командной строки, предназначенный для файлов JS, который можно легко модифицировать, чтобы заботиться и о файлах CSS. Преимущества:

• Легко настраивается для использования несколькими разработчиками в проекте
• Объединяет файлы JS в порядке, указанном в script_order.txt
• Сжимает их с помощью Google Closure Compiler
• Разбивает JS на фрагменты <25 КБ, где это возможно, поскольку iPhone не будет кэшировать ничего больше, чем 25 КБ </li>
• Создает небольшой PHP-файл с тегами <script>, которые можно включить в случае необходимости
• Использование: js.sh -u yourname

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

Answer 8

Я не вижу, чтобы вы упомянули систему управления контентом (Wordpress, Joomla, Drupal и т. Д.), Но если вы используете любую популярную CMS, у них у всех есть плагины / модули (также бесплатные опции), которые минимизируют и кешируют ваши css и JS.

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

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

Answer 9

Первый шаг оптимизации - минимизация файлов.(Я настоятельно рекомендую GULP для минимизации и оптимизации. Его простое решение для просмотра, установки и всех файлов сжимаются одновременно. Поддерживает все CSS, JS, less, sass и т. Д. ...)

ИЛИ Решение старой школы:

1) В общем, в качестве процесса оптимизации, чтобы оптимизировать производительность сайта, попробуйте объединить все CSS в один файл и сжать файл с помощью Compass .Таким образом, ваши множественные запросы к статическому CSS будут заменены на один.

2) Проблема нескольких JS, которую вы можете решить с помощью CDN (или Google Hosted Libraries), поэтому запросы отправляются на другой сервер, а не на ваш.Таким образом, сервер не ожидает завершения предыдущего запроса перед отправкой следующего.

3) Если у вас есть собственный локально сохраненный JavaScript, сверните каждый файл с помощью плагина Brackets «Сжать JavaScript».Это в основном один щелчок, чтобы сжать JavsScript. Brackets - бесплатный редактор, созданный для CSS и JS, но может использоваться для PHP и других языков.Существует множество плагинов на выбор, созданных как для разработчиков, так и для разработчиков.В общем случае «одним щелчком» можно выполнить все эти (пока несколько) команд.Кстати, скобки заменили мой очень дорогой Dreamweaver;)

3) Попробуйте использовать такие инструменты, как Sass , Compass, less , чтобы минимизировать CSS.

Примечание: Даже без использования SASS или переменных ваш CSS будет сжат (просто используйте чистый CSS и Compass команда "watch" сожмет его для вас).

Надеюсь, это поможет!

Answer 10

Если вы выполняете какую-либо предварительную обработку файлов, которые вы обслуживаете, вы, вероятно, захотите настроить правильную систему сборки (например, Makefile).Таким образом, у вас есть несколько исходных файлов без дублирования, и всякий раз, когда вы вносите изменения, вы запускаете команду «make», и все автоматически созданные файлы обновляются.Если система сборки уже установлена, узнайте, как она работает, и используйте ее.Если нет, вам нужно добавить один.

Итак, сначала выясните, как комбинировать и минимизировать ваши файлы из командной строки (документация по YUICompressor покрывает это).Назначьте каталог для автоматически сгенерированного материала, отдельно от материала, с которым вы работаете, но который доступен для веб-сервера, и выводите туда, например, gen / scripts / комбинированный.js.Поместите команды, которые вы использовали, в Makefile и перезапускайте make каждый раз, когда вы вносите изменения и хотите, чтобы они вступили в силу.Затем обновите заголовки в других файлах, чтобы они указывали на объединенные и свернутые файлы.