Łącz i minimalizuj wiele plików CSS / JS

Próbuję zoptymalizować wydajność witryny, konsolidując i kompresując pliki CSS i JS. Moje pytanie dotyczy raczej (konkretnych) kroków, jak to osiągnąć, biorąc pod uwagę rzeczywistą sytuację, z którą miałem do czynienia (choć powinno być typowe również dla innych programistów).

Moja strona odwołuje się do kilku plików CSS i JS, takich jak następujące:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/css/main.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/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>

W przypadku wydania produkcyjnego chciałbym połączyć 3 pliki CSS w jeden i zminimalizować za pomocą np. YUI Compressor . Ale wtedy musiałbym zaktualizować wszystkie strony, które potrzebują tych 3 plików, aby odwoływały się do nowo zminimalizowanego CSS. Wydaje się to podatne na błędy (np. Usuwasz i dodajesz niektóre linie w wielu plikach). Jakieś inne mniej ryzykowne podejście? Ten sam problem dla plików JS.

Sprawdź minify - pozwala łączyć wiele plików js, css w jeden po prostu układając je w adres URL, np.

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

Używamy go od lat i robi świetną robotę i robi to w locie (nie ma potrzeby edycji plików).

Myślę, że kompresor YUI jest najlepszy, jaki istnieje. Minimalizuje JS i CSS, a nawet usuwa te console.loginstrukcje, których ludzie używają do debugowania JavaScript na niskim poziomie.

Sprawdź jakie to proste .

Możesz uruchomić go w zadaniu Ant i dlatego dołączyć go do swoich punktów zaczepienia post / pre-commit, jeśli używasz svn / git.

AKTUALIZACJA: Obecnie używam gruntów przy składkach concat, minify i uglify. Możesz go używać z obserwatorem, aby tworzył nowe zminimalizowane pliki w tle po każdej zmianie źródła. Uglify contrib nie tylko usuwa dzienniki konsoli, ale także usuwa nieużywane funkcje i właściwości.

Zobacz ten samouczek, aby uzyskać krótki wgląd.

AKTUALIZACJA: W dzisiejszych czasach ludzie wycofują się od „chrząknięcia” i jego poprzednika „łyka” i używają npm jako narzędzia do budowania. Przeczytaj o tym tutaj .

AKTUALIZACJA: Więc teraz ludzie używają przędzy do uruchamiania npm. Nic dziwnego; ikona przędzy to kot. Większość obecnych ram używać WebPack na pakiet środków w pakiety, które następnie również dba o minifikacji .

Musiałbym zaktualizować wszystkie strony, które potrzebują tych 3 plików, aby odwoływały się do nowo zminimalizowanego CSS.

Po pierwsze powiedziałbym, że powinieneś mieć wspólny nagłówek. Więc nie będzie musiał zmieniać wszystkich nagłówków przez cały czas, gdy zajdzie taka potrzeba. Dobrą praktyką jest posiadanie pojedynczego nagłówka lub 2-3. Jeśli potrzebujesz strony, możesz zmienić nagłówek. Więc kiedy chcesz rozszerzyć swoją aplikację internetową, będzie to mniej ryzykowne i żmudne.

Nie wspomniałeś o swoich środowiskach programistycznych. Możesz zobaczyć, że na liście znajduje się wiele narzędzi do kompresji dla różnych środowisk . I używasz dobrego narzędzia, czyli YUI Compressor.

Skończyło się na używaniu CodeKit do łączenia moich plików CSS i JS. Bardzo przydatną funkcją jest możliwość wykonania konkatenacji podczas zapisywania pliku; ponieważ monitoruje odpowiednie zasoby CSS / JS. Po poprawnym połączeniu, np. W 1 plik CSS i 1 JS, wszystkie inne pliki mogą po prostu odnosić się do tych 2.

Możesz nawet poprosić CodeKit o wykonanie minimalizacji / kompresji w locie.

Zastrzeżenie: nie jestem w żaden sposób powiązany z CodeKit. Znalazłem go przypadkowo w sieci i posłużył jako świetne narzędzie w moim procesie tworzenia. Zawiera również dobre aktualizacje, odkąd użyłem go po raz pierwszy ponad rok temu.

Szybka wskazówka dla użytkowników systemu Windows, jeśli chcesz tylko łączyć pliki:

Otwórz cmd w wybranym miejscu i po prostu potokuj swoje pliki do pliku za pomocą „ type ”

dawny:

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

Jeśli kolejność skryptów jest ważna, musisz jawnie wpisać pliki w żądanej kolejności .

Używam tego w pliku bat dla moich projektów 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

Na ulicy jest rok 2015, a imo najłatwiej używa gulp - http://gulpjs.com/ . Zmniejszanie kodu za pomocą gulp-uglify dla skryptów js i gulp-minify-css dla css jest bardzo proste. Na pewno warto spróbować łyka

Nie widzę, żebyś wspominał o systemie zarządzania treścią (Wordpress, Joomla, Drupal itp.), Ale jeśli używasz popularnego CMS, wszystkie one mają dostępne wtyczki / moduły (również darmowe opcje), które zminimalizują i buforują twoje css i js.

Korzystanie z wtyczki umożliwia zachowanie nieskompresowanych wersji dostępnych do edycji, a po wprowadzeniu zmian wtyczka automatycznie uwzględnia zmiany i ponownie kompresuje plik. Po prostu upewnij się, że wybrałeś wtyczkę, która pozwoli Ci wykluczyć pliki (takie jak niestandardowy plik js), jeśli cokolwiek zepsuje.

W przeszłości próbowałem ręcznie zachować te pliki i zawsze zmienia się to w koszmar konserwacji. Powodzenia, mam nadzieję, że to pomogło.

Dla osób, które chcą czegoś bardziej lekkiego i elastycznego, stworzyłem dziś js.sh, aby rozwiązać ten problem. Jest to proste narzędzie wiersza poleceń przeznaczone dla plików JS, które można łatwo zmodyfikować, aby obsługiwały również pliki CSS. Korzyści:

• Łatwo konfigurowalny do użytku przez wielu programistów w projekcie
• Łączy pliki JS w kolejności określonej w pliku script_order.txt
• Kompresuje je za pomocą Google Closure Compiler
• Tam, gdzie to możliwe, dzieli JS na fragmenty o rozmiarze <25 KB, ponieważ iPhone nie buforuje niczego większego niż 25 KB
• Generuje mały plik PHP z <script>tagami, które możesz dołączyć w razie potrzeby
• Stosowanie: js.sh -u yourname

Przydałoby się kilka ulepszeń, ale w moim przypadku jest to lepsze niż wszystkie inne rozwiązania, które do tej pory widziałem.

Pierwszym krokiem optymalizacji jest minimalizacja plików. (Zdecydowanie polecam GULP do minimalizacji i optymalizacji. Jego proste rozwiązanie do monitorowania, instalacja i wszystkie pliki są kompresowane jednocześnie. Obsługuje wszystkie CSS, JS, less, sass itp.)

LUB Oldschoolowe rozwiązanie:

1) Ogólnie rzecz biorąc, w ramach procesu optymalizacji, aby zoptymalizować wydajność witryny, spróbuj scalić wszystkie CSS w jeden plik i skompresować plik za pomocą Compass . W ten sposób wiele żądań do statycznego CSS zostanie zastąpionych jednym.

2) Problem z wieloma kodami JS, który można rozwiązać za pomocą CDN (lub bibliotek hostowanych przez Google), więc żądania kierowane są do innego serwera niż Twój. W ten sposób serwer nie czeka na zakończenie poprzedniego żądania przed wysłaniem następnego.

3) Jeśli masz lokalnie przechowywany kod JavaScript, zminimalizuj każdy plik za pomocą wtyczki Brackets „Kompresuj JavaScript”. W zasadzie wystarczy jedno kliknięcie, aby skompresować JavsScript. Brackets to darmowy edytor stworzony dla CSS i JS, ale może być używany dla PHP i innych języków. Istnieje wiele wtyczek do wyboru przeznaczonych zarówno dla programistów front-end, jak i back-end. Ogólnie rzecz biorąc, wystarczy jedno kliknięcie, aby wykonać wszystkie te (dotychczas wiele) poleceń. Przy okazji, Brackets zastąpił mojego bardzo drogiego Dreamweavera;)

3) Spróbuj użyć narzędzi takich jak Sass , Compass, mniej, aby zminimalizować CSS.

Uwaga: Nawet bez miksowania SASS lub zmiennych, twój CSS zostanie skompresowany (po prostu użyj czystego CSS i polecenia "watch" Compass skompresuje go za Ciebie).

Mam nadzieję, że to pomoże!

Jeśli wykonujesz jakiekolwiek wstępne przetwarzanie plików, które udostępniasz, prawdopodobnie chcesz ustawić odpowiedni system kompilacji (np. Makefile). W ten sposób masz kilka plików źródłowych bez duplikatów, a za każdym razem, gdy wprowadzasz zmianę, uruchamiasz „make”, który aktualizuje wszystkie automatycznie generowane pliki. Jeśli istnieje już system kompilacji, dowiedz się, jak to działa i używaj go. Jeśli nie, musisz go dodać.

Więc najpierw dowiedz się, jak połączyć i zminimalizować pliki z wiersza poleceń (dokumentacja YUICompressor obejmuje to). Wyznacz katalog dla rzeczy generowanych automatycznie, oddzielny od rzeczy, nad którymi pracujesz, ale dostępny dla serwera WWW i wyślij tam, np. Gen / scripts / connected.js. Umieść polecenia, których użyłeś w pliku Makefile i uruchom ponownie polecenie „make” za każdym razem, gdy wprowadzisz zmianę i chcesz, aby odniosła skutek. Następnie zaktualizuj nagłówki w innych plikach, aby wskazywały na połączone i zminimalizowane pliki.

W moim projekcie symfony robię coś takiego

{# 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 %}

Gdy wersja deweloperska jest gotowa do produkcji, używam tego skryptu do łączenia wszystkich plików css i zastępowania zawartości min.css.

Ale to rozwiązanie działa tylko wtedy, gdy te same pliki css są zawarte na wszystkich stronach.

Możesz użyć modułu węzła cssmin , który jest zbudowany ze słynnego kompresora 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);