Объединение и Минимизация нескольких файлов CSS/JS

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

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

<!--
  It 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. Но тогда мне нужно будет обновить все страницы, которые нуждаются в этих 3 файлах, чтобы ссылаться на недавно измененный CSS. Это кажется подверженным ошибкам (например, вы удаляете и добавляете некоторые строки во многие файлы). Любой другой менее рискованный подход? Такая же проблема для JS файлов.

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

См. этот учебник для краткого ознакомления.

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

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

Ответ 4

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

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

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

Ответ 5

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

Откройте 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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

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

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

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

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

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

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

Ответ 10

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

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

Ответ 11

В моем проекте 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 готова к выпуску, я использую этот script, чтобы объединить все файлы css и заменить содержимое min.css.

Но это решение работает, только если одни и те же файлы css включены во все страницы.

Ответ 12

Вы можете использовать модуль cssmin node, который построен из знаменитого компрессора 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);

Ответ 13

Все более быстрые утилиты находятся здесь

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