Как работать с файлами javascript и css на сайте? - PullRequest
8 голосов
/ 10 июня 2010

Недавно у меня возникли некоторые мысли о том, как обрабатывать совместно используемые файлы javascript и css в веб-приложении.

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

На рабочем сайте довольно глупо иметь большое количество HTTP-запросов и загружать много килобайт ненужного JavaScript и избыточного CSS.Решение этой проблемы, конечно, заключается в создании одного большого связанного файла на странице, который содержит только необходимую информацию, которая затем минимизируется и отправляется сжатому (GZIP) клиенту.

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

Какой хороший подход для этого?Как вы справляетесь с этим в вашем приложении?

Ответы [ 5 ]

4 голосов
/ 11 июня 2010

Я создал библиотеку, Combres , которая делает именно это, то есть минимизирует, объединяет и т. Д. Он также автоматически обнаруживает изменения как локальных, так и удаленных файлов JS / CSS и передает последние сведения в браузер. Это бесплатно и с открытым исходным кодом. Проверьте эту статью на введение в Combres.

2 голосов
/ 10 июня 2010

Я имею дело с точно такой же проблемой на сайте, который я запускаю.

Я недавно узнал о проекте с именем SquishIt (см. GitHub ),Он построен для фреймворка Asp.net.Если вы не используете asp.net, вы все равно можете узнать о принципах того, что он делает здесь.

SquishIt позволяет вам создавать именованные «пакеты» файлов, а затем визуализировать эти комбинированные и минимизированные пакеты файлов.по всему сайту.

1 голос
/ 10 июня 2010

Некоторое время назад я написал обработчик 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). Когда он завершает чтение в файле и сжимает его, он сохраняет большую уменьшенную строку в кэше на стороне сервера (ОЗУ) в течение нескольких часов. Он всегда сначала просматривается в кеше, поэтому при последующих запросах его не нужно повторно сжимать.

Мне нравится это решение, потому что ...

  • максимально уменьшает количество запросов
  • Для развертывания не требуется никаких дополнительных шагов
  • Это очень легко поддерживать

Единственным недостатком является то, что весь код стиля / скрипта будет в конечном итоге храниться в памяти сервера. Но оперативная память сегодня настолько дешева, что она не так важна, как раньше.

Также, стоит упомянуть одну вещь: убедитесь, что строка запроса не допускает каких-либо вредоносных манипуляций с путями (допускаются только A-Z и 0-9).

1 голос
/ 10 июня 2010

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

0 голосов
/ 10 июня 2010

То, о чем вы говорите, называется минификация .

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

Вот один проект в коде Google - minify .

Здесь - пример обработчика .NET Http, который делает все это на лету.

...