Поєднуйте та зменшуйте декілька файлів CSS / JS

Я намагаюся оптимізувати ефективність сайту, консолідуючи та стискаючи файли 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.

Перевірте minify - він дозволяє поєднувати декілька файлів js, css в один, просто складаючи їх в URL-адресу, наприклад

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

Ми використовуємо його роками, і він чудово справляється і робить це на льоту (не потрібно редагувати файли).

Я думаю, що YUI Compressor - найкращий з усіх можливих. Він мінімізує JS і CSS, і навіть позбавляє ці console.logтвердження, які люди використовують для налагодження JavaScript низького рівня.

Перевірте, наскільки це просто .

Ви можете запустити його в мурашиному завданні і, отже, включити його у свої хуки після / попереднього коміту, якщо ви використовуєте svn / git.

ОНОВЛЕННЯ: Сьогодні я використовую grunt з конкатами, мініфікую та углифікую внески. Ви можете використовувати його з спостерігачем, щоб він створював нові зменшені файли у фоновому режимі щоразу, коли ви змінюєте джерело. Uglify contrib не тільки позбавляє журнали консолі, але й позбавляє невикористаних функцій та властивостей.

Дивіться цей підручник для короткого розуміння.

ОНОВЛЕННЯ: Сьогодні люди відступають від бурчання та попередника "ковтання" і використовують npm як інструмент побудови. Прочитайте про це тут .

ОНОВЛЕННЯ: Отже, тепер люди використовують пряжу для запуску npm. Не дивно; значок пряжі - це кішка. Більшість сучасних фреймворків використовують webpack для об’єднання ресурсів у пакети, що також дбає про мініфікацію .

Мені потрібно буде оновити всі сторінки, яким потрібні ці 3 файли для посилання на нещодавно зменшений CSS.

По-перше, я б сказав, що у вас повинен бути загальний заголовок. Тому не потрібно буде змінювати всі заголовки у будь-який час, коли це необхідно. Хорошою практикою є наявність одного заголовка або 2-3. Тож у міру необхідності вашої сторінки ви можете змінити заголовок. Тож, коли ви захочете розширити свій веб-додаток, це буде менш ризиковано та нудно.

Ви не згадували своє середовище розробки. Ви бачите, що для різних середовищ перелічено багато інструментів для стиснення . І ви використовуєте хороший інструмент, тобто YUI Compressor.

У підсумку я використав CodeKit для об’єднання моїх файлів CSS та JS. Особливістю, яку я вважаю справді корисною, є можливість зробити конкатенацію при збереженні файлу; оскільки він контролює відповідні активи CSS / JS. Як тільки я правильно їх поєднав, наприклад, до 1 файлу CSS та 1 файлу JS, усі інші файли просто можуть посилатися на ці 2.

Ви навіть можете попросити CodeKit зробити поступову мініфікацію / стиснення.

Застереження: Я жодним чином не пов'язаний з CodeKit. Я випадково знайшов його в Інтернеті, і це послужило чудовим інструментом у моєму процесі розробки. Він також має гарні оновлення, оскільки я вперше використовував його більше року тому.

Короткий підказка для користувачів Windows, якщо ви хочете лише об'єднати файли:

Відкрийте cmd у потрібному місці та просто перекладіть свої файли у файл за допомогою " type "

напр .:

type .\scripts\*.js >> .\combined.js

Якщо порядок ваших сценаріїв важливий, вам слід чітко ввести файли у бажаному порядку .

Я використовую це у файлі bat для своїх проектів angular / bootstrap

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

Це 2015 рік на вулиці, і найпростішим способом imo є використання ковтка - http://gulpjs.com/ . Зменшити код за допомогою gulp-uglify для скриптів js та gulp-minify-css для css дуже просто. Ковток безумовно варто спробувати

Я не бачу, що ви згадуєте систему управління вмістом (Wordpress, Joomla, Drupal тощо), але якщо ви використовуєте будь-яку популярну CMS, усі вони мають доступні плагіни / модулі (також безкоштовні опції), які зменшать і кешують ваші css та js.

Використання плагіна надає можливість зберігати нестиснуті версії доступними для редагування, а потім, коли вносяться зміни, плагін автоматично включає ваші зміни та повторно стискає файл. Просто переконайтеся, що ви вибрали плагін, який дозволить вам виключати файли (наприклад, власний файл js), якщо він щось зламає.

Раніше я намагався тримати ці файли вручну, і це завжди перетворюється на кошмар обслуговування. Удачі, сподіваюся, це допомогло.

Для людей, які хочуть щось більш легке та гнучке, я сьогодні створив js.sh для вирішення цієї проблеми. Це простий інструмент командного рядка, орієнтований на файли JS, який можна легко змінити, щоб також піклуватися про файли CSS. Переваги:

• Легко налаштовується для використання декількома розробниками проекту
• Об'єднує файли JS у порядку, вказаному в script_order.txt
• Стискає їх за допомогою компілятора закриття Google
• Розділяє JS на фрагменти <25kb, де це можливо, оскільки iPhone не кешує нічого більше 25kb
• Створює невеликий PHP-файл із <script>тегами, які ви можете включити там, де це доречно
• Використання: js.sh -u yourname

Він міг би використати деякі вдосконалення, але це краще для мого випадку використання, ніж усі інші рішення, які я бачив до цього часу.

Першим кроком оптимізації є мінімізація файлів. (Я настійно рекомендую GULP для мінімізації та оптимізації. Його просте рішення для перегляду, установка та всі файли стискаються одночасно. Підтримує всі CSS, JS, менше, sass тощо ...)

АБО рішення для старої школи:

1) Загалом, як процес оптимізації для оптимізації продуктивності сайту спробуйте об’єднати всі CSS в один файл і стиснути файл за допомогою Compass . Таким чином ваші кілька запитів до статичного CSS будуть замінені на один.

2) Проблему декількох JS ви можете вирішити, використовуючи CDN (або розміщені в Google бібліотеки), тому запити надходять на інший сервер, не ваш. Таким чином сервер не чекає завершення попереднього запиту перед відправленням наступного.

3) Якщо у вас є власний локально збережений JavaScript, мінімізуйте кожен файл за допомогою плагіна " Дужки " "Стиснути JavaScript". В основному це один клік для стиснення JavsScript. Дужки - це безкоштовний редактор, створений для CSS та JS, але може використовуватися для PHP та інших мов. Існує багато плагінів на вибір, призначених як для інтерфейсних, так і для фонових розробників. Взагалі "один клік", щоб виконати всі ці (поки що кілька) команд. До речі, дужки замінили мій дуже дорогий Dreamweaver;)

3) Спробуйте використовувати такі інструменти, як Sass , Compass, менше, щоб мінімізувати ваш CSS.

Примітка: Навіть без використання змішування SASS або змінних ваш CSS буде стиснутий (просто використовуйте чистий CSS і команда "watch" Compass його стисне для вас).

Сподіваюся, це допоможе!

Якщо ви виконуєте будь-яку попередню обробку файлів, які ви обслуговуєте, ви, мабуть, хочете налаштувати належну систему збірки (наприклад, Makefile). Таким чином, у вас є вихідні файли без дублювання, і кожного разу, коли ви вносите зміни, ви запускаєте 'make', і він оновлює всі автоматично згенеровані файли. Якщо вже існує система складання, дізнайтеся, як вона працює, і використовуйте її. Якщо ні, вам потрібно буде додати його.

Отже, спочатку з’ясуйте, як об’єднати та зменшити файли з командного рядка (документація YUICompressor це охоплює). Визначте каталог для автоматично згенерованих матеріалів, окремо від матеріалів, над якими ви працюєте, але доступні для веб-сервера, і виводьте їх туди, наприклад gen / scripts / kombiniran.js. Помістіть команди, які ви використовували, у Makefile, і повторіть "make" кожного разу, коли ви внесли зміни, і хочете, щоб воно набрало чинності. Потім оновіть заголовки інших файлів, щоб вказати на об’єднані та зменшені файли.

У своєму проекті symfony я роблю щось подібне

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

Коли версія розробника готова до виробництва, я використовую цей сценарій для об'єднання всіх файлів css та заміни вмісту min.css.

Але це рішення працює лише в тому випадку, якщо однакові файли css включені на всі сторінки.

Ви можете використовувати модуль вузла 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);

Тут можна знайти всі швидкі утиліти

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json