Минификация css и javascript

Минификатор JS & CSS

Сделайте свой сайт меньше и быстрее, минифицировав коды JS и CSS!

Популярные вопросы

Что делает Минификатор JS и CSS?

Минификатор JS и CSS – это онлайн-компрессор JavaScript/CSS, который позволяет сжимать и минимизировать все ваши файлы JS/CSS до 80% от их первоначального размера. Скопируйте и вставьте код, или же вы можете загрузить несколько файлов сразу, а затем сжать их. Мы используем UglifyJS 3 и babili-standalone для всех сокращений и сжатий JavaScript. Этот минификатор удаляет пробелы, убирает комментарии, объединяет файлы и оптимизирует/сокращает ряд общих программных шаблонов. И он идет с огромным набором тестов.

Почему вам стоит сжимать JS/CSS?

Время загрузки страницы является важным аспектом UX вашего сайта. Некоторые конструкторы жертвуют скоростью страницы, чтобы разместить дизайн, контент и большую функциональность. Но посетителям скорость загрузки важна – если страница загружается слишком медленно, они могут не дожидаться ее отображения. Сжав ваш сайт, вы «минимизируете» скрипт на 20%, что приведет к более быстрой скорости загрузки, уменьшению пропускной способности и меньшему количеству HTTP-запросов.

Как это работает?

Это просто! Скопируйте и вставьте код в поле для ввода в левой части экрана, или же вы можете перетащить весь файл в выделенную область. Подтвердите, является ли это JavaScript или CSS, а затем нажмите кнопку «Уменьшить». В одно мгновение вы получите уменьшенный, сжатый код. Вы также можете нажать кнопку «Дополнительные параметры», если вам необходимо настроить дополнительные параметры. А ещё он бесплатный и без скрытых платежей.

Будет ли мой код читаться после использования инструмента?

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

Источник

Как уменьшить размер CSS, JS и HTML файлов

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

Ниже приведены примеры того, что удаляется во время минификации файла:

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

Чтобы различать минифицированные файлы, в их имена добавляется расширение .min ( например: foobar.min.css ).

Разница между минификацией и сжатием

Минификация и сжатие CSS файлов – это не одно и то же. Хотя оба этих метода предназначены для уменьшения времени загрузки. Различие заключается в том, как они работают. Сжатие используется для уменьшения размера файла при помощи алгоритмов сжатия, таких как Gzip или brotli . Файлы сжимаются перед отправкой клиенту.

Следовательно, процесс сжатия осуществляется следующим образом:

1. Файл сжимается с помощью алгоритма сжатия;
2. Выполняется запрос для сжатой версии файла;
3. Сжатый файл отправляется от сервера к клиенту;
4. Клиент распаковывает файл и считывает информацию.

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

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

Пример минификации

В следующем примере показано, как CSS файл выглядит до и после минификации.

ДО CSS минификации:

.entry-content p < font-size: 14px !important; >.entry-content ul li < font-size: 14px !important; >.product_item p a

ПОСЛЕ CSS минификации:

.entry-content p,.entry-content ul li.product_item p a

После минификации CSS-файл стало сложнее читать, поскольку отсутствуют переносы строк, разделители и т.д. Но оптимизированный вариант имеет меньший размер, что ускоряет его загрузку, как и сжатие CSS онлайн .

Минификация CSS

Онлайн

• cssminifier.com — инструмент довольно легкий в понимании. Введите существующий CSS и уменьшенная версия создается автоматически. После этого можно загрузить сжатый код CSS в виде файла:

Инструменты разработки

• yui.github.io : позволяет осуществлять процесс сборки в среде разработки, которая уменьшает, переименовывает и сохраняет оптимизированный файл в рабочем каталоге;
• phpied.com : инструмент использует возможности минификации CSS и YUI Compressor, но он применяет JavaScript вместо Java.

Минификация JS

Онлайн

• closure-compiler.appspot.com : можно использовать как онлайн-инструмент и как API-интерфейс. Этот инструмент позволяет настроить оптимизацию и форматирование:

• jscompress.com : позволяет минимизировать JS путем копирования/вставки кода. Дополнительно можно загрузить JavaScript-файл и выполнить процесс минификации нескольких файлов одновременно:

• javascript-minifier.com : создан теми же разработчиками, что и cssminifier . JS Minifier позволяет скопировать минимизированный код или скачать его в виде файла. А также осуществить сжатие CSS и JS онлайн :

Инструменты разработки

Минификация HTML

• htmlcompressor.com : предоставляет возможность выбора между различными уровнями минификации HTML и встроенного в него кода CSS и JS :

• minifycode.com : представляет собой текстовое поле, куда нужно вставить код HTML и сгенерировать его уменьшенную версию:

Существует множество инструментов для минификации файлов. Многие CMS также предлагают плагины и расширения для минификации CSS , JS и HTML — файлов.

WordPress плагины для минификации

Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS . Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress .

Drupal модуль минификации

В сообществе Drupal популярным вариантом для минификации является модуль Minify . Он позволяет минимизировать HTML , JavaScript файлы и использует компилятор Google Closure , чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.

Joomla! Расширение для минификации

CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize , которое уменьшает размер JavaScript и производит сжатие CSS файлов . Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.

Преимущества уменьшения файлов

Решение уменьшить размер CSS , JS и HTML файлов предоставляет преимущества, как пользователям сайта, так и его владельцу. Использование минификации — это отличный способ оптимизировать ваш сайт, и это легко реализовать с помощью рассмотренных инструментов и плагинов.

ВЛ Виктория Лебедева автор-переводчик статьи « How To Minify CSS, JS, and HTML »

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

Источник

Минификация CSS и Javascript в Website проекте ASP.NET

Про минимизацию javascript и css знают все. Ну если кто не знает, то, вкратце, это уменьшение объема файлов за счет удаления комментариев, разметки, переносов строк и прочего. Особенно актуально оно для интернет сайтов, которые при первом же визите пользователя должны порадовать его своей производительностью. Но наш проект, во-первых, работает в локальной сети, а во-вторых, используется на одних и тех же компьютерах изо дня в день, поэтому мы долгое время совсем не задумывались об оптимизации скриптов и стилей. Пока не стали плотно работать с ExtJS.

Созданная страничка со всеми подключенными скриптами и стилями весит больше 5 Мб (около 200 файлов). Одно только сгенерированное DOM-дерево в коде HTML содержит более 500 000 байт. Работать с системой пользователь может начать не раньше, чем через 5 секунд после загрузки страницы (инициализация скриптов, ExtJS и т.п.).

Как оказалось, несмотря на наличие локальной сети у заказчика и частую работу с одними и теми же страницами (должно же быть встроенное кэширование в браузере), иногда с загрузкой страниц возникают проблемы. Поэтому было решено уменьшить количество запросов к серверу и поработать над общей производительностью ExtJS в IE8.

Для минификации скриптов сначала скачал Google Closure Compiler, как один из самых популярных, да и корпорация добра плохого не сделает…

Google Closure Compiler

Положил файлик compressor.jar в папку со скриптами. Чтобы его запускать, пришлось поставить java. Сделал bat-файлик запуска с двумя командами, последняя из которых всего лишь делает задержку в 10 секунд, чтобы можно было успеть увидеть возможные ошибки и самому закрыть окно командной строки. Вот таким вот образом слил все скрипты в один файл, вес уменьшился примерно в полтора раза (это содержимое bat-файла):

cd %0\..\ java -jar compiler.jar --js=NavigationJS.js --js=SSSC.js (здесь еще куча файликов аналогичным образом) --js_output_file=bcr_master.min.js ping -n 1 -w 100000 192.168.254.254 >nul 

Все просто и элегантно, провозился минут пять. Команда cd %0\..\ в начале файла нужна для того, чтобы дальнейшее выполнение команд происходило внутри директории, в которой расположен сам .bat файл, а не с директории по умолчанию после запуска командной строки.

Но тут возникла идея минимизировать не только JS, но и CSS файлы, а Google Closure этого делать, увы, не умеет. Поэтому решил переделать все на YUI Compressor, о котором много отзывов, и он также сжимает CSS.

YUI Compressor

Для объединения всех файлов проекта был написан батник уже значительно большего объема, потому что этот YUI не умеет воспринимать в строке сразу несколько файлов — ему можно скармливать только по одному файлу. А значит, предварительно нам нужно слепить файлы в один временный файл командой copy, а уже потом его сжать юай компрессором.

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

cd %0\..\ copy /b .\..\..\Scripts\JSON.js + (еще много файликов) + Bids.js combined.js java -jar yuicompressor-2.4.8.jar combined.js --type js -o combined.min.js --charset cp-1251 copy /b combined.min.js + (еще много уже минимизированных файликов) + .\..\..\Scripts\jquery\plugins.fileupload.min.js mbcrfull.min.js del combined.min.js del combined.js ::copy /b .\..\..\Styles\MPMessage.css + (еще много файликов) + .\..\..\BCR\Styles\Kondor.css combined1.css ::java -jar yuicompressor-2.4.8.jar combined1.css -o .\..\..\BCR\Styles\mbcrfull.min.css --charset cp-1251 ::del combined1.css ::copy /b .\..\..\Styles\jquery\ui.all.css + (еще много файликов) + .\..\..\Styles\jquery\jqueryslidemenu.css combined2.css ::java -jar yuicompressor-2.4.8.jar combined2.css -o .\..\..\Styles\jquery\mbcrfull.min.css --charset cp-1251 ::del combined2.css ::ping -n 1 -w 10000 192.168.254.254 >nul 

• Во-первых, нужно тщательно следить за использованием относительных путей к изображениям. Стили ExtJS и других библиотек основаны на относительных путях, а значит они сразу выпадают из нашего объединения (кстати, в большинстве своем они уже минифицированы).
• Во-вторых, в CSS файлах могут встречаться команды @import . Это ад.
• В третьих, можно же создавать минифицированные объединенные стили отдельно в каждой из папок, а потом включать в проект, но, как выяснилось, таких файлов у нас получается не так уж много и прирост производительности будет небольшой. Поэтому решили минификацию CSS пока отложить. (Можно было и на Google Closure Compiler остановиться в таком случае)

А теперь самое интересное — батник у нас есть, объединенные скрипты генерируются успешно, осталось их прописать в релизной версии проекта. Все вроде работает, нужно коммитить…. каждый раз запуская скрипт.

Автоматизация минификации при коммите в релиз

Дело в том, что у нас две ветки в SVN — рабочая (DEV) и релизная. Каждый раз перед выкладыванием версии на сервер мы выполняем merge всех (ну или нужной части) изменений, билдим и только потом (если все нормально) коммитим. И надо, во-первых, не забывать самому постоянно выполнять этот батник перед коммитом в релиз, а во-вторых, следить за всеми разработчиками, чтобы тоже не забывали это делать.

И тут нам на помощь приходят Hook Scripts в TortoiseSVN!

В настройках клиента SVN заходим на вкладку Hook Scripts и выбираем там папку нашего проекта и сам батник. В опциях Hook Type выбираем «Start-Commit Hook«, чтобы скрипт запускался перед тем, как отобразится окно коммита.

Настройка запуска минификации перед коммитом

Вуаля, все работает и не надо ни за кем следить!

Есть, конечно, куча встроенных в visual studio средств объединения и минификации, но их тоже надо устанавливать на каждой машине, а еще в них тоже много тонкостей. До этого у нас использовался встроенный метод Composite Scripts, но он не обладает достаточной функциональностью в сравнении с теми же YUI или Google closure Compiler.

Источник