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

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

Ответ 1

В дополнение к использованию сжатия на стороне сервера, использование интеллектуального кодирования - лучший способ снизить стоимость полосы пропускания. Вы всегда можете использовать такие инструменты, как Dean Edward Javascript Packer, но для 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" />

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Объедините все ваши JavaScript и CSS в один файл. Таким образом, браузер может загрузить исходный код в одном запросе на сервер. Сделайте эту часть процесса сборки.
Включите кеширование на уровне веб-сервера, используя кеш-контроль 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" />

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Для минимизации кодов java-скриптов вы можете использовать Javascript Online Minifier Tool. На данный момент это лучший jin minifier/un-minifiers
Для минимизации CSS-кодов вы можете использовать CSS Minifier/Minify Tool. В настоящее время это лучший css minifier/un-minifiers

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

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

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

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

Ответ 13

YUI Compressor выполняет довольно хорошую работу по сжатию как Javascript, так и CSS.

Ответ 14

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

Кроме того, он имеет режим сжатия CSS, который я не играл с таким же количеством.

Ответ 15

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

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

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

Ответ 16

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

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

Ответ 17

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

Ответ 18

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