Объединение и уменьшение нескольких файлов 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="https://stackoverflow.com/css/main.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/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.

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

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

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

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

Посмотрите, насколько это просто .

Если вы используете svn / git, вы можете запустить его в задаче ant и, следовательно, включить его в свои обработчики post / pre-commit.

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

См. Это руководство для краткого обзора.

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

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

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

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

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

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

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

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

Подсказка для пользователей 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 определенно стоит попробовать

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

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

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

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

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

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

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

ИЛИ Старое школьное решение:

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

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

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

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

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

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

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

Итак, сначала выясните, как объединить и минимизировать ваши файлы из командной строки (документация YUICompressor охватывает это). Назначьте каталог для автоматически сгенерированного материала, отдельный от материала, над которым вы работаете, но доступный для веб-сервера, и выводите его туда, например, gen / scripts / Combined.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 %}

Когда версия dev готова к производству, я использую этот скрипт для объединения всех файлов 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);