Gabungkan dan Minimalkan Beberapa File CSS / JS

Saya mencoba untuk mengoptimalkan kinerja situs dengan mengkonsolidasikan dan mengompresi file CSS dan JS. Pertanyaan saya lebih tentang langkah-langkah (konkret) tentang bagaimana mencapai ini, mengingat situasi nyata yang saya hadapi (harus menjadi tipikal di antara pengembang lain juga).

Halaman saya mereferensikan beberapa file CSS dan JS seperti berikut:

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

Untuk rilis produksi, saya ingin menggabungkan 3 file CSS menjadi satu dan mengecilkannya menggunakan misalnya YUI Compressor . Tapi kemudian, saya perlu memperbarui semua halaman yang membutuhkan 3 file ini untuk merujuk ke CSS yang baru diminimalkan. Tampaknya ini rawan kesalahan (mis. Anda menghapus dan menambahkan beberapa baris di banyak file). Pendekatan lain yang tidak terlalu berisiko? Masalah yang sama untuk file JS.

Lihat minify - ini memungkinkan Anda menggabungkan beberapa file js, css menjadi satu hanya dengan menumpuknya ke dalam url, mis.

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

Kami telah menggunakannya selama bertahun-tahun dan berfungsi dengan baik serta melakukannya dengan cepat (tidak perlu mengedit file).

Saya pikir Kompresor YUI adalah yang terbaik yang pernah ada. Ini meminimalkan JS dan CSS dan bahkan menghapus console.logpernyataan yang digunakan orang untuk debugging JavaScript tingkat rendah.

Lihat betapa mudahnya itu .

Anda dapat memulainya dalam tugas semut dan karena itu memasukkannya ke dalam kait pasca / pra-komit jika Anda menggunakan svn / git.

UPDATE: Saat ini saya menggunakan grunt dengan kontribusi concat, minify & uglify. Anda dapat menggunakannya dengan pengamat sehingga membuat file kecil baru di latar belakang setiap kali Anda mengubah sumber Anda. Kontrib uglify tidak hanya menghapus log konsol, tetapi juga menghapus fungsi dan properti yang tidak digunakan.

Lihat tutorial ini untuk wawasan singkat.

UPDATE: Saat ini orang mundur dari grunt dan pendahulunya "gulp" dan menggunakan npm sebagai build tool. Bacalah di sini .

UPDATE: Jadi sekarang orang menggunakan benang untuk menjalankan npm. Pantas; ikon benang adalah seekor kucing. Sebagian besar framework saat ini menggunakan webpack untuk menggabungkan resource menjadi paket, yang kemudian juga menangani minifikasi .

Saya perlu memperbarui semua halaman yang membutuhkan 3 file ini untuk merujuk ke CSS yang baru diminimalkan.

Pertama saya akan mengatakan Anda harus memiliki tajuk yang sama. Jadi tidak perlu mengubah semua tajuk setiap saat bila diperlukan. Praktik yang baik untuk memiliki satu atau 2-3 tajuk. Jadi sesuai kebutuhan halaman Anda, Anda dapat mengubah header Anda. Jadi, kapan pun Anda ingin memperluas aplikasi web Anda, risikonya akan berkurang dan membosankan.

Anda belum menyebutkan lingkungan pengembangan Anda. Anda dapat melihat ada banyak alat kompresi yang terdaftar untuk lingkungan yang berbeda . Dan Anda menggunakan alat yang baik yaitu YUI Compressor.

Saya akhirnya menggunakan CodeKit untuk menggabungkan file CSS dan JS saya. Fitur yang menurut saya sangat berguna adalah kemampuan untuk melakukan penggabungan setelah penyimpanan file; karena memonitor aset CSS / JS masing-masing. Setelah saya menggabungkannya dengan benar misalnya ke 1 file CSS dan 1 JS, semua file lain dapat merujuk ke 2 ini.

Anda bahkan dapat meminta CodeKit untuk melakukan minifikasi / kompresi saat itu juga.

Penafian: Saya tidak berafiliasi dengan CodeKit. Saya menemukannya secara acak di web dan ini telah menjadi alat yang hebat dalam proses pengembangan saya. Itu juga dilengkapi dengan pembaruan yang bagus sejak saya pertama kali menggunakannya lebih dari setahun yang lalu.

Tip cepat untuk pengguna windows, jika Anda hanya ingin menggabungkan file:

Buka cmd di tempat yang diinginkan, dan cukup salin file Anda ke file menggunakan " type "

ex:

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

Jika urutan skrip Anda penting, Anda harus mengetik file secara eksplisit, dalam urutan yang diinginkan .

Saya menggunakan ini dalam file bat untuk proyek sudut / bootstrap saya

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

Ini tahun 2015 di jalan dan cara termudah imo menggunakan gulp - http://gulpjs.com/ . Memperkecil kode menggunakan gulp-uglify untuk skrip js dan gulp-minify-css untuk css sangat sederhana. Gulp pasti patut dicoba

Saya tidak melihat Anda menyebutkan sistem manajemen konten (Wordpress, Joomla, Drupal, dll) tetapi jika Anda menggunakan CMS populer, semuanya memiliki plugin / modul yang tersedia (opsi gratis juga) yang akan mengecilkan dan menyimpan cache css dan js Anda.

Menggunakan plugin memberi Anda kemampuan untuk menyimpan versi yang tidak dikompresi tersedia untuk diedit, kemudian ketika perubahan dibuat plugin secara otomatis menyertakan perubahan Anda dan memampatkan ulang file. Pastikan Anda memilih plugin yang akan membiarkan Anda mengecualikan file (seperti file js khusus) jika itu merusak apa pun.

Saya telah mencoba di masa lalu untuk menyimpan file ini secara manual dan selalu berubah menjadi mimpi buruk pemeliharaan. Semoga berhasil, semoga ini membantu.

Untuk orang-orang yang menginginkan sesuatu yang sedikit lebih ringan dan fleksibel, saya membuat js.sh hari ini untuk mengatasi masalah ini. Ini adalah alat baris perintah sederhana yang ditargetkan ke file JS yang dapat dengan mudah dimodifikasi untuk menangani file CSS juga. Manfaat:

• Dapat dikonfigurasi dengan mudah untuk digunakan oleh banyak pengembang dalam sebuah proyek
• Menggabungkan file JS dalam urutan yang ditentukan dalam script_order.txt
• Mengompresnya dengan Closure Compiler Google
• Membagi JS menjadi <25kb potongan jika memungkinkan karena iPhone tidak akan menyimpan cache yang lebih besar dari 25kb
• Menghasilkan file PHP kecil dengan <script>tag yang dapat Anda sertakan jika sesuai
• Pemakaian: js.sh -u yourname

Ini bisa menggunakan beberapa perbaikan, tetapi lebih baik untuk kasus penggunaan saya daripada semua solusi lain yang saya lihat sejauh ini.

Langkah pertama pengoptimalan adalah minimisasi file. (Saya sangat merekomendasikan GULP untuk minimisasi dan pengoptimalan. Solusi jam tangan sederhana, instalasi, dan semua file dikompresi sekaligus.Mendukung semua CSS, JS, less, sass, dll ...)

ATAU Solusi sekolah lama:

1) Secara umum, sebagai proses optimasi, untuk mengoptimalkan kinerja situs, coba gabungkan semua CSS dalam satu file dan kompres file dengan menggunakan Kompas . Dengan begitu banyak permintaan Anda ke CSS statis akan diganti dengan satu permintaan.

2) Masalah beberapa JS dapat Anda selesaikan dengan menggunakan CDN (atau Google Hosted Libraries) sehingga permintaan pergi ke server lain bukan milik Anda. Dengan cara itu server tidak menunggu permintaan sebelumnya selesai sebelum mengirim berikutnya.

3) Jika Anda memiliki JavaScript yang disimpan secara lokal, minimalkan setiap file dengan menggunakan plugin Brackets "Compress JavaScript". Ini pada dasarnya satu klik untuk mengompres JavsScript. Brackets adalah editor gratis yang dibuat untuk CSS dan JS, tetapi dapat digunakan untuk PHP dan bahasa lain. Ada banyak plugin untuk dipilih yang dibuat untuk pengembang front-end dan back-end. Secara umum "satu klik" untuk melakukan semua ini (sejauh ini banyak) perintah. Btw, Brackets menggantikan Dreamweaver saya yang sangat mahal;)

3) Coba gunakan alat seperti Sass , Compass, kurangi untuk meminimalkan CSS Anda.

Catatan: Bahkan tanpa menggunakan pencampuran SASS atau variabel, CSS Anda akan dikompresi (cukup gunakan CSS murni dan perintah Compass "watch" akan memampatkannya untuk Anda).

Saya harap ini membantu!

Jika Anda melakukan prapemrosesan pada file yang Anda layani, Anda mungkin ingin menyiapkan sistem build yang tepat (misalnya Makefile). Dengan begitu, Anda memiliki beberapa file sumber tanpa duplikasi, dan setiap kali Anda membuat perubahan, Anda menjalankan 'make' dan memperbarui semua file yang dibuat secara otomatis. Jika sudah ada sistem build, pelajari cara kerjanya dan gunakan. Jika tidak, Anda perlu menambahkannya.

Jadi pertama-tama, cari tahu cara menggabungkan dan mengecilkan file Anda dari baris perintah (dokumentasi YUICompressor mencakup ini). Tentukan direktori untuk hal-hal yang dihasilkan secara otomatis, terpisah dari hal-hal yang Anda kerjakan tetapi dapat diakses oleh server web, dan hasilkan ke sana, misalnya gen / scripts / gabungan.js. Letakkan perintah yang Anda gunakan ke dalam Makefile, dan jalankan kembali 'make' setiap kali Anda membuat perubahan dan ingin itu berlaku. Kemudian perbarui tajuk di file lain agar mengarah ke file gabungan dan yang diperkecil.

Dalam proyek symfony saya, saya melakukan sesuatu seperti ini

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

Ketika versi dev siap untuk produksi, saya menggunakan skrip ini untuk menggabungkan semua file css dan mengganti konten min.css.

Tetapi solusi ini hanya berfungsi jika file css yang sama disertakan di semua halaman.

Anda dapat menggunakan modul node cssmin yang dibangun dari kompresor YUI yang terkenal

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

Semua utilitas yang lebih cepat ditemukan di sini

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