Birden Çok CSS / JS Dosyasını Birleştirin ve Küçültün

CSS ve JS dosyalarını birleştirip sıkıştırarak bir site performansını optimize etmeye çalışıyorum. Sorum, karşı karşıya olduğum gerçek bir durum göz önüne alındığında, bunun nasıl başarılacağına dair (somut) adımlarla ilgili (yine de diğer geliştiriciler arasında da tipik olmalı).

Sayfam, aşağıdakiler gibi birkaç CSS ve JS dosyasına referans veriyor:

<!--
  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>

Üretim sürümü için, 3 CSS dosyasını bir araya getirmek ve örneğin YUI Compressor kullanarak küçültmek istiyorum . Ancak daha sonra, yeni küçültülmüş CSS'ye başvurmak için bu 3 dosyaya ihtiyaç duyan tüm sayfaları güncellemem gerekiyor. Bu, hataya açık görünüyor (örneğin, birçok dosyada bazı satırları kaldırıyor ve ekliyorsunuz). Daha az riskli başka bir yaklaşım var mı? JS dosyaları için aynı sorun.

Minify'a göz atın - birden fazla js, css dosyasını yalnızca bir url'ye yığarak tek bir dosyada birleştirmenizi sağlar

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

Yıllarca kullandık ve harika bir iş çıkarıyor ve bunu anında yapıyor (dosyaları düzenlemeye gerek yok).

Bence YUI Kompresör , en iyisi. JS ve CSS'yi küçültür ve hatta console.loginsanların düşük seviyeli JavaScript hata ayıklaması için kullandıkları ifadeleri bile kaldırır .

Ne kadar kolay olduğunu kontrol edin .

Bunu bir karınca görevinde başlatabilir ve dolayısıyla svn / git kullanıyorsanız post / pre-commit kancalarınıza dahil edebilirsiniz.

GÜNCELLEME: Bugünlerde concat, küçültme ve çirkinleştirme katkılarıyla grunt kullanıyorum. Bir izleyici ile kullanabilirsiniz, böylece kaynağınızı her değiştirdiğinizde arka planda yeni küçültülmüş dosyalar oluşturur. Çirkinleştirme, yalnızca konsol günlüklerini çıkarmakla kalmaz, aynı zamanda kullanılmayan işlevleri ve özellikleri de çıkarır.

Kısa bir bilgi için bu eğiticiye bakın .

GÜNCELLEME: Günümüzde insanlar grunt und selefi "yudum" dan geri adım atıyor ve bir oluşturma aracı olarak npm kullanıyor. Buradan okuyun .

GÜNCELLEME: Artık insanlar npm çalıştırmak için iplik kullanıyor. Şaşmamalı; iplikler simgesi bir kedidir. Mevcut çerçevelerin çoğu , kaynakları paketler halinde bir araya getirmek için web paketini kullanır ve bu da daha sonra küçültmeyi de halleder .

Yeni küçültülmüş CSS'ye başvurmak için bu 3 dosyaya ihtiyaç duyan tüm sayfaları güncellemem gerekiyor.

Öncelikle ortak bir başlığa sahip olmanız gerektiğini söyleyebilirim. Bu nedenle, gerektiğinde tüm başlıkları her zaman değiştirmesi gerekmeyecektir. Tek başlığa veya 2-3'e sahip olmak iyi bir uygulamadır. Böylece sayfanızın ihtiyacı olduğu gibi başlığınızı değiştirebilirsiniz. Bu nedenle, web uygulamanızı genişletmek istediğinizde daha az riskli ve sıkıcı olacaktır.

Geliştirme ortamlarınızdan bahsetmediniz. Farklı ortamlar için listelenmiş birçok sıkıştırma aracı olduğunu görebilirsiniz . Ve iyi bir araç, yani YUI Kompresör kullanıyorsunuz.

CSS ve JS dosyalarımı birleştirmek için CodeKit'i kullanmayı bıraktım . Gerçekten yararlı bulduğum özellik, dosya kaydedildiğinde birleştirmeyi yapabilme becerisidir; çünkü ilgili CSS / JS varlıklarını izler. Bunları örneğin 1 CSS ve 1 JS dosyasıyla doğru bir şekilde birleştirdiğimde, diğer tüm dosyalar bu 2'ye başvurabilir.

CodeKit'ten anında küçültme / sıkıştırma yapmasını bile isteyebilirsiniz.

Feragatname: CodeKit ile herhangi bir bağlantım yok. Bunu web'de rastgele buldum ve geliştirme sürecimde harika bir araç oldu. Bir yıldan daha uzun bir süre önce kullandığımdan beri iyi güncellemelerle birlikte geliyor.

Yalnızca dosyaları birleştirmek istiyorsanız, Windows kullanıcıları için hızlı ipucu:

İstediğiniz yerde bir cmd açın ve dosyalarınızı " type " kullanarak bir dosyaya yönlendirmeniz yeterli

ör .:

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

Komut dosyalarınızın sırası önemliyse, dosyaları istediğiniz sırada açıkça yazmanız gerekir .

Kullandığım bu benim açısal / önyükleme projeleri için yarasa dosyasında

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

Sokakta 2015 yılı ve imo'nun en kolay yolu gulp kullanması - http://gulpjs.com/ . JS betikleri için gulp-uglify ve css için gulp -minify-css kullanarak kodu küçültmek çok basittir. Gulp kesinlikle denemeye değer

Bir içerik yönetim sisteminden (Wordpress, Joomla, Drupal, vb.) Bahsettiğinizi görmüyorum, ancak herhangi bir popüler CMS kullanıyorsanız, css ve js'lerinizi küçültecek ve önbelleğe alacak eklentileri / modülleri (ücretsiz seçenekler de) vardır.

Bir eklenti kullanmak size sıkıştırılmamış sürümleri düzenleme için hazır tutma yeteneği sağlar, ardından değişiklikler yapıldığında eklenti otomatik olarak değişikliklerinizi içerir ve dosyayı yeniden sıkıştırır. Herhangi bir şeyi bozması durumunda dosyaları (özel bir js dosyası gibi) hariç tutmanıza izin verecek bir eklenti seçtiğinizden emin olun.

Geçmişte bu dosyaları manuel olarak tutmayı denedim ve bu her zaman bir bakım kabusuna dönüşüyor. İyi şanslar, umarım bu yardımcı olur.

Biraz daha hafif ve esnek bir şey isteyenler için, bugün bu sorunu çözmek için js.sh'i yarattım . CSS dosyalarıyla da ilgilenmek için kolayca değiştirilebilen JS dosyalarına yönelik basit bir komut satırı aracıdır. Faydaları:

• Bir projede birden çok geliştirici tarafından kullanılmak üzere kolayca yapılandırılabilir
• JS dosyalarını script_order.txt'de belirtilen sırayla birleştirir
• Bunları Google'ın Kapatma Derleyicisi ile sıkıştırır
• İPhone 25kb'den büyük hiçbir şeyi önbelleğe almayacağı için JS'yi mümkün olduğunda 25 kb'tan küçük parçalara böler
• <script>Uygun olduğunda ekleyebileceğiniz etiketleri içeren küçük bir PHP dosyası oluşturur
• Kullanım: js.sh -u yourname

Bazı iyileştirmeler kullanabilirdi, ancak kullanım durumum için şimdiye kadar gördüğüm diğer tüm çözümlerden daha iyi.

Optimizasyonun ilk adımı dosya küçültmedir. ( Küçültme ve optimizasyon için kesinlikle GULP'yi tavsiye ederim . Basit izleme çözümü, kurulumu ve tüm dosyalar aynı anda sıkıştırılır.Tüm CSS, JS, daha az, sass vb.

VEYA Eski okul çözümü:

1) Genel olarak, bir optimizasyon süreci olarak, bir site performansını optimize etmek için, tüm CSS'yi tek bir dosyada birleştirmeyi deneyin ve Compass kullanarak dosyayı sıkıştırın . Bu şekilde, statik CSS'ye yönelik birden çok isteğiniz tek bir istekle değiştirilecektir.

2) CDN (veya Google Tarafından Barındırılan Kitaplıklar) kullanarak çözebileceğiniz birden fazla JS sorunu, böylece istekler sizin değil başka bir sunucuya gider. Bu şekilde sunucu, bir sonraki göndermeden önce önceki isteğin tamamlanmasını beklemez.

3) Yerel olarak depolanmış kendi JavaScript'iniz varsa, Brackets eklentisi "JavaScript'i Sıkıştır" kullanarak her dosyayı küçültün . JavsScript'i sıkıştırmak temelde tek tıklama. Brackets , CSS ve JS için yapılmış ücretsiz bir düzenleyicidir, ancak PHP ve diğer diller için kullanılabilir. Hem ön uç hem de arka uç geliştiriciler için seçilebilecek çok sayıda eklenti var. Genel olarak tüm bu (şimdiye kadar birden fazla) komut yapmak için "tek tıklama". Btw, Parantezler çok pahalı Dreamweaver'ımın yerini aldı;)

3) CSS'nizi en aza indirmek için Sass , Compass, daha az gibi araçları kullanmayı deneyin .

Not: SASS miksajını veya değişkenlerini kullanmadan bile CSS'niz sıkıştırılacaktır (sadece basit CSS kullanın ve Compass "watch" komutu sizin için sıkıştıracaktır).

Umarım bu yardımcı olur!

Hizmet verdiğiniz dosyalar üzerinde herhangi bir ön işlem yapıyorsanız, muhtemelen uygun bir derleme sistemi (örn. Makefile) kurmak istersiniz. Bu şekilde, çoğaltması olmayan bazı kaynak dosyalara sahip olursunuz ve ne zaman bir değişiklik yapsanız, 'make'i çalıştırırsınız ve otomatik olarak oluşturulan tüm dosyaları güncel hale getirir. Halihazırda bir yapı sistemi varsa, nasıl çalıştığını öğrenin ve kullanın. Değilse, bir tane eklemeniz gerekir.

Öncelikle, dosyalarınızı komut satırından nasıl birleştireceğinizi ve küçülteceğinizi bulun (YUICompressor belgeleri bunu kapsar). Üzerinde çalıştığınız ancak web sunucusunun erişebildiği şeylerden ayrı olarak, otomatik olarak oluşturulmuş öğeler için bir dizin belirleyin ve oraya çıktı verin, örneğin gen / scripts / combust.js. Kullandığınız komutları bir Makefile'a koyun ve her değişiklik yaptığınızda ve etkili olmasını istediğinizde 'make'i tekrar çalıştırın. Ardından, diğer dosyalardaki başlıkları birleştirilmiş ve küçültülmüş dosyaları işaret edecek şekilde güncelleyin.

Symfony projemde böyle bir şey yapıyorum

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

Dev sürümü üretime hazır olduğunda, kullandığım bu senaryoyu tüm css dosyaları birleştirmek ve içeriğini değiştirmek için min.css.

Ancak bu çözüm yalnızca tüm sayfalarda aynı css dosyaları varsa işe yarar.

Ünlü YUI kompresöründen oluşturulan cssmin node modülünü kullanabilirsiniz.

$ 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);