Каков наилучший способ уменьшить размер моих файлов Javascript и CSS?

При работе с большими и / или многими файлами Javascript и CSS, как лучше всего уменьшить размеры файлов?

18 ответов

Решение

В дополнение к использованию сжатия на стороне сервера, использование интеллектуального кодирования является наилучшим способом снижения затрат на пропускную способность. Вы всегда можете использовать такие инструменты, как Javascript Packer Дина Эдварда, но для CSS потратьте время на изучение CSS Shorthand. Например, использовать:

background: #fff url(image.gif) no-repeat top left;

...вместо:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Также используйте каскадную природу CSS. Например, если вы знаете, что ваш сайт будет использовать одно семейство шрифтов, определите это для всех элементов, которые есть в теге body, следующим образом:

body{font-family:arial;}

Еще одна вещь, которая может помочь, - это включить ваши CSS и JavaScript в виде файлов вместо встроенных или в заголовке каждой страницы. Таким образом, ваш сервер должен обслуживать их только один раз, после того как этот браузер выйдет из кэша.

Включая JavaScript

<script type="text/javascript" src="/scripts/loginChecker.js"></script>

Включая CSS

<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />

Minify, похоже, является одним из самых простых способов уменьшить Javascript.

Включение zip на уровне веб-сервера также может помочь.

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

Я думаю, вы обнаружите, что это проще и эффективнее.

Подробнее о приключениях Джеффа с ним.

Сжатие и минимизация (удаление пробелов) - это начало.

Дополнительно:

  1. Объедините все ваши JavaScript и CSS в одном файле. Таким образом, браузер может загрузить исходный код в одном запросе к серверу. Сделайте эту часть вашего процесса сборки.

  2. Включите кеширование на уровне веб-сервера с помощью http-заголовка cache-control. Установите для срока действия большое значение (например, год), чтобы браузер загружал источник только один раз. Чтобы разрешить будущие изменения, включите номер версии в строку запроса, например:

<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />

Я удивлен, что никто не предложил сжать ваш код. Прямой ~50% экономии там!

Вот онлайн инструменты, с помощью которых вы можете сделать это:-

  • Для HTML, CSS или JS minifier вы можете использовать https://cssminifiers.com, На данный момент это лучший css minigier/un-minifier
  • Для сжатия вашего HTML, CSS или JS вы можете использовать http://www.htmlminifier.com/ онлайн инструмент.
  • А также вы можете использовать http://javascript-minify.com онлайн инструмент для минимизации вас JS.

Выше приведены инструменты, которые мне кажутся вам полезными.

Смотрите вопрос: Лучший компрессор JavaScript

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

Помощь YUI Compressor дает несколько полезных советов о том, как настроить скрипты, чтобы добиться еще большей экономии.

Dojo Shrinksafe - это компрессор Javascript, который использует настоящий интерпретатор JS, поэтому он не сломает ваш код. Другие могут хорошо работать, но Shrinksafe - хороший вариант для использования в скрипте сборки, так как вам не нужно повторно тестировать сжатый скрипт.

Shrinksafe может помочь: http://shrinksafe.dojotoolkit.org/ Мы используем его, и он делает довольно хорошую работу. Мы выполняем его из сборки ant для упаковки нашего веб-приложения.

Google содержит несколько предварительно сжатых файлов библиотеки JavaScript, которые вы можете включить в свой собственный сайт. Google не только обеспечивает пропускную способность для этого, но и на основе большинства алгоритмов кэширования файлов браузера, если пользователь уже загрузил файл с Google для другого сайта, ему не придется делать это снова для вашего сайта. Хороший небольшой бонус для некоторых библиотек 90K + JS.

Я обнаружил, что JSCompress - хороший способ не только минимизировать JavaScript, но и комбинировать несколько скриптов. Полезно, если вы используете разные сценарии только один раз. Сохранено 70% до сжатия (и что-то похожее после сжатия).

Не забудьте добавить обратно в любые уведомления об авторских правах впоследствии.

Для javascript я использую Javascript Packer от Дина Эдвардса. Он был портирован на.NET, perl, php4, php5, WSH, и есть даже плагин aptana.

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

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

function compressCSS($css) {
    return
        preg_replace(
            array('@\s\s+@','@(\w+:)\s*([\w\s,#]+;?)@'),
            array(' ','$1$2'),
            str_replace(
                array("\r","\n","\t",' {','} ',';}'),
                array('','','','{','}','}'),
                preg_replace('@/\*[^*]*\*+([^/][^*]*\*+)*/@', '', $css)
            )
        )
    ;
}

Хотя эта функция и упаковщик Javascript уменьшат размер отдельных файлов, для обеспечения максимальной производительности вашего сайта вы также захотите сократить количество HTTP-запросов, которые вы делаете. Каждый файл Javascript и CSS представляет собой отдельный запрос, поэтому объединение их в один файл приведет к оптимальному результату. Вместо того, чтобы пытаться сохранить один файл JS, вы можете использовать программу / технику, которую я написал в своем блоге (бесстыдная самостоятельная вставка) по адресу http://spadgos.com/?p=32

Программа в основном читает файл типа "сценарий сборки", который будет одновременно объединять и сжимать несколько файлов Javascript и CSS в один (каждый) для вас (или более, если хотите). Есть несколько вариантов вывода и отображения всех файлов. Там есть большая статья, и источник находится в свободном доступе.

YUI Compressor имеет мой голос по той простой причине, что вместо того, чтобы просто выполнять преобразования регулярных выражений в коде, он фактически создает дерево разбора кода, подобное интерпретатору Javascript, а затем сжимает его таким образом. Обычно он очень осторожен в том, как он обрабатывает сжатие идентификаторов.

Кроме того, у него есть режим сжатия CSS, с которым я не так много играл.

YUI Compressor отлично справляется со сжатием Javascript и CSS.

CssTidy - лучший оптимизатор CSS, о котором я знаю. Он (конфигурируемо) удаляет комментарии, удаляет пробелы, переписывает, используя многие сокращенные правила, упомянутые выше, и т.д. Сжатие результата также помогает, как уже упоминали другие.

Степень сжатия может быть довольно драматичной, и вы можете свободно комментировать свой CSS, не беспокоясь о размере файла.

К сожалению, этот уровень предварительной обработки взаимодействует с некоторыми из популярных "хаков CSS" непредсказуемым (или предсказуемым, но нежелательным) способом. Некоторые работают, некоторые нет, а некоторые требуют настройки конфигурации, которые снижают уровень сжатия для других вещей (особенно комментариев).

Попробуйте инструменты веб-компрессора от Boryi для сжатия стандартного HTML-файла (без встроенного кода Javascript и кода CSS, но можно связать или импортировать), кода Javascript (правильно заканчивающегося символом;) и кода CSS.

Я бы дал тест-драйв новым оптимизаторам времени выполнения в ASP.Net, опубликованным по http://www.codeplex.com/NCOptimizer.

Другие вопросы по тегам