Объедините и уменьшите несколько файлов CSS / JS
Я пытаюсь оптимизировать производительность сайта путем консолидации и сжатия файлов 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.
13 ответов
В итоге я использовал CodeKit для объединения моих файлов CSS и JS. Особенность, которую я считаю действительно полезной, - это возможность выполнять конкатенацию при сохранении файла; потому что он контролирует соответствующие активы CSS / JS. Как только я собрал их, например, в 1 CSS-файл и 1 JS-файл, все остальные файлы могут просто ссылаться на эти 2.
Вы даже можете попросить CodeKit минимизировать / сжать на лету.
Отказ от ответственности: я никоим образом не связан с CodeKit. Я случайно нашел его в Интернете, и он послужил отличным инструментом в моем процессе разработки. Это также идет с хорошими обновлениями, так как я впервые использовал его больше года назад.
Проверьте minify - он позволяет объединять несколько файлов js, css в один, просто складывая их в URL, например
<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>
Мы использовали его годами, и он отлично работает и делает это на лету (не нужно редактировать файлы).
Я думаю, что YUI Compressor - лучшее, что есть. Он минимизирует JS и CSS и даже лишает их console.log заявления, которые люди используют для низкоуровневой отладки JavaScript.
Проверьте, насколько это просто.
Вы можете запустить его в Ant-задаче и, следовательно, включить его в ваши хуки post / pre commit, если вы используете svn / git.
ОБНОВЛЕНИЕ: в настоящее время я использую grunt с concat, минимизирую и увеличиваю вклады. Вы можете использовать его с наблюдателем, чтобы он создавал новые минифицированные файлы в фоновом режиме всякий раз, когда вы меняете свой источник. Модуль uglify не только удаляет журналы консоли, но и неиспользуемые функции и свойства.
Смотрите этот урок для краткого понимания.
ОБНОВЛЕНИЕ: В настоящее время люди отступают от grunt и его предшественника "gulp" и используют npm в качестве инструмента для сборки. Читайте об этом здесь.
Мне нужно обновить все страницы, которым нужны эти 3 файла, чтобы они ссылались на недавно уменьшенный CSS.
Во-первых, я бы сказал, что у вас должен быть общий заголовок. Так что не нужно менять все заголовки в любое время, когда это необходимо. Это хорошая практика, чтобы иметь один или два заголовка. Так как ваша страница нужна, вы можете изменить свой заголовок. Поэтому, когда вы захотите расширить свое веб-приложение, оно будет менее рискованным и утомительным.
Вы не упомянули свои среды разработки. Вы можете видеть, что есть много инструментов сжатия, перечисленных для различных сред. И вы используете хороший инструмент ieYUI Compressor.
Быстрый совет для пользователей 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
Это 2015 год на улице и самый простой способ, которым ИМО использует gulp - http://gulpjs.com/. Сократить код с помощью gulp-uglify для js-скриптов и gulp-minify -css для css очень просто. Gulp определенно стоит попробовать
Для людей, которые хотят что-то более легкое и гибкое, сегодня я создал js.sh для решения этой проблемы. Это простой инструмент командной строки, предназначенный для файлов JS, который можно легко изменить, чтобы он позаботился и о файлах CSS. Выгоды:
- Легко настраивается для использования несколькими разработчиками в проекте
- Объединяет файлы JS в порядке, указанном в script_order.txt
- Сжимает их с помощью Google Closure Compiler
- Разбивает JS на фрагменты <25 КБ, где это возможно, так как iPhone не будет кэшировать ничего больше, чем 25 КБ
- Создает небольшой файл PHP с
<script>теги, которые вы можете включить в случае необходимости - Использование:
js.sh -u yourname
Он может использовать некоторые улучшения, но в моем случае это лучше, чем все другие решения, которые я видел до сих пор.
Я не вижу, чтобы вы упоминали систему управления контентом (Wordpress, Joomla, Drupal и т. Д.), Но если вы используете какую-либо популярную CMS, у них у всех есть плагины / модули (также бесплатные опции), которые будут минимизировать и кэшировать ваши css и js.
Использование плагина дает вам возможность сохранять несжатые версии доступными для редактирования, а затем, когда изменения сделаны, плагин автоматически включает ваши изменения и повторно сжимает файл. Просто убедитесь, что вы выбрали плагин, который позволит вам исключить файлы (например, пользовательский файл js), если он что-нибудь сломает.
В прошлом я пытался сохранить эти файлы вручную, и это всегда превращалось в кошмар обслуживания. Удачи, надеюсь, это помогло.
Первый шаг оптимизации - минимизация файлов. (Я настоятельно рекомендую GULP для минимизации и оптимизации. Его простое решение для просмотра, установки и всех файлов сжимаются одновременно. Поддерживает все CSS, JS,less, sass и т. Д...)
ИЛИ Решение старой школы:
1) В целом, в качестве процесса оптимизации, чтобы оптимизировать производительность сайта, попробуйте объединить все CSS в один файл и сжать файл с помощью Compass. Таким образом, ваши множественные запросы к статическому CSS будут заменены на один.
2) Проблема нескольких JS, которую вы можете решить с помощью CDN (или Google Hosted Libraries), поэтому запросы отправляются на другой сервер, а не на ваш. Таким образом, сервер не ожидает завершения предыдущего запроса перед отправкой следующего.
3) Если у вас есть собственный локально сохраненный JavaScript, сверните каждый файл с помощью плагина Brackets "Compress JavaScript". Это в основном один клик, чтобы сжать JavsScript. Brackets - бесплатный редактор, созданный для CSS и JS, но может использоваться для PHP и других языков. Существует множество плагинов на выбор, созданных как для разработчиков, так и для разработчиков. В общем, "один клик", чтобы выполнить все эти (пока несколько) команд. Кстати, брекеты заменили мой очень дорогой Dreamweaver;)
3) Попробуйте использовать такие инструменты, как Sass, Compass, меньше, чтобы минимизировать ваш CSS.
Примечание. Даже без использования микширования SASS или переменных ваш CSS будет сжат (просто используйте чистый CSS, и команда Compass "watch" сожмет его для вас).
Надеюсь, это поможет!
Если вы выполняете какую-либо предварительную обработку файлов, которые вы обслуживаете, вы, вероятно, захотите настроить правильную систему сборки (например, Makefile). Таким образом, у вас есть несколько исходных файлов без дублирования, и всякий раз, когда вы вносите изменения, вы запускаете команду "make", и она автоматически обновляет все автоматически сгенерированные файлы. Если система сборки уже установлена, узнайте, как она работает, и используйте ее. Если нет, вам нужно добавить один.
Итак, сначала выясните, как объединять и минимизировать ваши файлы из командной строки (в документации по YUICompressor это описано). Назначьте каталог для автоматически сгенерированного материала, отдельно от материала, с которым вы работаете, но который доступен для веб-сервера, и выводите туда, например, gen/scripts/ комбинированный.js. Поместите команды, которые вы использовали, в Makefile и перезапускайте make каждый раз, когда вы вносите изменения и хотите, чтобы они вступили в силу. Затем обновите заголовки в других файлах, чтобы они указывали на объединенные и свернутые файлы.
В моем проекте Symfony я делаю что-то вроде этого
{# layout.html.twig #}
{% block styles %}
{% if app.environment == 'prod' %}
<link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
{% else %}
<link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
{% endif %}
{% endblock %}
{# some-view.html.twig #}
{% extends 'AppMainBundle::layout.html.twig' %}
{% block styles %}
{{ parent() }}
{% if app.environment != 'prod' %}
<link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
{% else %}
{% endblock %}
Когда версия для разработки готова к работе, я использую этот скрипт для объединения всех CSS-файлов и замены содержимого min.css,
Но это решение работает, только если одни и те же файлы CSS включены во все страницы.
Вы можете использовать модуль узла cssmin, который построен из известного компрессора YUI
$ npm -g i cosmic # install
# Usage
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);
Все более быстрые утилиты находятся здесь
http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json