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

Уменьшить кажется одним из самых простых способов сжать Javascript.

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

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

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

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

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

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

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

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

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

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

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

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

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

Помимо использования сжатия на стороне сервера, использование интеллектуального кодирования - лучший способ снизить затраты на полосу пропускания. Вы всегда можете использовать такие инструменты, как Упаковщик Javascript Дина Эдварда, но для CSS найдите время, чтобы изучить Сокращение CSS. Например. использовать:

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" />

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

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

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

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

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

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

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

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

Кроме того:

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

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

<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%!

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

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

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

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

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

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

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

• Для минимизации кодов сценариев Java вы можете использовать Инструмент Javascript Online Minifier. На данный момент это лучший js-минификатор / разминификатор.

• Для минимизации кодов css вы можете использовать Инструмент CSS Minifier / Minify. На данный момент это лучший минификатор / разминификатор css

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