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

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

20
css javascript jscompress

17 ответов

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

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

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

7

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

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

Подробнее из Приключений Джеффа с ним.

6

сжатие и сокращение (удаление пробелов)-это начало.

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

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

3

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

3

вопрос: лучший компрессор javascript

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

2

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

1

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

1

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

1

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

1

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

Javascript packing поставляется в нескольких вкусах - некоторые просто удаляют комментарии и пробелы, другие изменят ваши имена переменных, чтобы быть краткими, а другие, ну, я даже не знаю, что они делают, но выход уверен, что мал. Высококачественное сжатие работает с помощью функции 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, вы можете использовать программу / технику, которую я написал в своем блоге (shameless self plug) на http://spadgos.com/?p=32

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

0

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

0

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

0

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

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

0

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

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

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

0

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

0

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

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

0