Как обработать файлы JavaScript и CSS через сайт?
У меня недавно были некоторые мысли о том, как обработать совместно использованные файлы JavaScript и CSS через веб-приложение.
В текущем веб-приложении, что я продолжаю работать, я получил настоящее большое количество другого javascripts и файлов CSS, которые помещаются в папку на сервере. Некоторые файлы снова используются, в то время как другие не.
В месте производства довольно глупо иметь высокое количество Запросов HTTP и много килобайтов ненужного JavaScript и избыточной загружаемой CSS. Решение этого состоит в том, чтобы, конечно, создать один большой связанный файл на страницу, которая только содержит необходимую информацию, которая затем минимизирована и отправлена сжатая (GZIP) до клиента.
Нет никаких забот, чтобы создать пакет файлов JavaScript и минимизировать их вручную, если Вы собирались сделать это однажды, но так как приложение непрерывно сохраняется, и вещи действительно изменяют и разрабатывают, это довольно скоро становится головной болью, чтобы сделать это вручную при выставлении новых обновлений, которые функции изменяют на javascripts и/или файлы CSS к производству.
Что хороший подход должен обработать это? Как Вы обрабатываете это в своем приложении?
5 ответов
То, о чем вы говорите, называется минификацией .
Есть много библиотек и помощников для разных платформ и языков, которые помогут в этом. Поскольку вы не публиковали то, что используете, я не могу указать вам на что-то более подходящее для вас.
Вот один проект с кодом Google - minify .
Здесь - пример обработчика .NET Http, который делает все это на лету.
Некоторое время назад я написал обработчик ASP.NET, который объединяет, сжимает/минимизирует, gzips и кэширует необработанные файлы исходного кода CSS и Javascript по требованию. Чтобы получить, например, три файла CSS, в разметке это выглядело бы так...
<link rel="stylesheet" type="text/css"
href="/getcss.axd?files=main;theme2;contact" />
Обработчик getcss.axd считывает строку запроса и определяет, какие файлы ему нужно считать и минифицировать (в данном случае он ищет файлы main.css, theme2.css и contact.css). По окончании чтения и сжатия файла он сохраняет большую минифицированную строку в кэше на стороне сервера (RAM) на несколько часов. Он всегда сначала смотрит в кэш, чтобы при последующих запросах не пришлось повторно сжимать.
Мне нравится это решение, потому что...
- Оно максимально сокращает количество запросов
- Не требуется никаких дополнительных шагов для развертывания
- Его очень легко поддерживать
Единственный минус - это то, что весь код стилей/скриптов в конечном итоге будет храниться в памяти сервера. Но оперативная память сейчас настолько дешева, что это не такая большая проблема, как раньше.
Также, стоит упомянуть одну вещь, убедитесь, что строка запроса не поддается никаким вредным манипуляциям с путями (допускаются только A-Z и 0-9).
Я создал библиотеку, Combres , который делает именно это, то есть минимизирует, объединяет и т. Д. Он также автоматически обнаруживает изменения как в локальных, так и в удаленных файлах JS / CSS и отправляет последние версии в браузер. Это бесплатно и с открытым исходным кодом. Ознакомьтесь с этой статьей , чтобы познакомиться с Combres.
Я имею дело с той же проблемой на сайте, который я запускаю.
Недавно я узнал о проекте под названием SquishIt (см. На GitHub ). Он создан для платформы Asp.net. Если вы не используете asp.net, вы все равно можете узнать о принципах, лежащих в основе того, что он здесь делает.
SquishIt позволяет создавать именованные «пакеты» файлов, а затем отображать эти объединенные и уменьшенные пакеты файлов по всему сайту.
Файлы CSS можно классифицировать и разбивать на логические части (например, общие, печать и т. Д.), А затем вы можете использовать функцию импорта CSS для успешной загрузки файлов CSS. Повторное использование этих небольших файлов также позволяет использовать кэширование на стороне клиента. Когда дело доходит до Javascript, я думаю, вы можете решить эту проблему на стороне сервера, несколько файлов сценария добавлены на страницу, вы также можете динамически генерировать серверную сторону файла сценария, но для работы кеширования на стороне клиента эти части должны иметь разные и статические адреса.