Объедините и уменьшите несколько файлов CSS / JS - PullRequest
Новая
       105

Объедините и уменьшите несколько файлов CSS / JS

88 голосов
/ 15 февраля 2012

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

Моя страница ссылается на несколько файлов CSS и JS, например: 

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

В производственном выпуске я хотел бы объединить 3 CSS-файла в один и минимизировать его, например, с помощью. YUI Compressor . Но тогда мне нужно обновить все страницы, которым нужны эти 3 файла, чтобы они ссылались на недавно уменьшенный CSS. Это кажется подверженным ошибкам (например, вы удаляете и добавляете несколько строк во многих файлах). Любой другой менее рискованный подход? Та же проблема для файлов JS.

Ответы [ 13 ]

1 голос
/ 29 января 2016

Вы можете использовать модуль узла cssmin , который построен из известного компрессора YUI 

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);
1 голос
/ 25 января 2015

В моем проекте Symfony я делаю нечто подобноесодержимое min.css.

Но это решение работает только в том случае, если на всех страницах содержатся одинаковые css-файлы.

0 голосов
/ 14 января 2017
Страница:
...