Cara menggabungkan beberapa js menjadi satu file. Cara Menggabungkan File Javascript di WordPress menjadi Satu File

Menggabungkan konten dari dua atau lebih objek JavaScript tertentu. Hasil gabungan ditulis ke objek pertama (juga akan dikembalikan oleh fungsi setelah dijalankan). Fungsi ini memiliki dua kegunaan:

menggabungkan isi objek target, objek1,.., objekN, memasukkan hasilnya ke dalam objek target.

Fitur penggunaan

Jika Anda menentukan dua objek atau lebih, hasilnya adalah gabungannya. Jika Anda menentukan hanya satu objek, fungsi extend() akan menambahkan kontennya ke objek global $(jQuery). Dengan cara ini, Anda bisa memperluas kemampuan perpustakaan dengan menambahkan fungsi Anda sendiri ke namespacenya. Ini bisa berguna saat menulis plugin.

Mari kita ingat bahwa sebagai hasil dari penggabungan objek, objek pertama akan diubah (juga akan dikembalikan sebagai hasil dari fungsi extend()). Jika Anda tidak ingin objek tertentu diubah, Anda dapat menetapkannya sebagai parameter target objek kosong:

var objek = $.extend (( ) , objek1, objek2) ;

Penyalinan rekursif (dalam).

Saat menggabungkan objek, bidang yang cocok akan ditimpa:

var object1 = (apel: 0, ceri: 97);

var object2 = (apel: 5, durian: 100);

$.extend(objek1, objek2) ;

/* Hasilnya seperti berikut: ( apel:5, ceri:97, durian:100 ); */

Secara default, extend() melakukan penyatuan objek yang dangkal, artinya jika objek tersebut berisi objek lain di dalamnya, extend() akan menimpanya seperti pada kasus sebelumnya:

Tindakan ini mengurangi jumlah permintaan ke server, sehingga mempercepat situs. Hal ini terutama berlaku untuk HTTP1.1 dan halaman yang memerlukan lebih dari 20 permintaan. Selain itu, ini menambah poin dalam ujian (yang bagi banyak orang merupakan hal terpenting).

Cara Menggabungkan File Javascript di WordPress menjadi Satu File - Metode Tanpa Plugin

Secara umum, ada plugin untuk tugas ini, tetapi di komentar untuk plugin tersebut ada banyak ulasan dengan semangat “tidak berfungsi”.

Jika Anda melakukannya “sepenuhnya secara manual”, maka Anda harus mengambil semua tumpukan kode secara manual dan menyalinnya ke dalam satu file. Cara ini tidak disarankan karena memiliki banyak kelemahan seperti:

1.) Sulitnya mencari nama deskriptor file javascript, hal ini berbeda dengan file CSS dimana kita dapat menemukan nama deskriptor atribut id. Pegangan ini penting karena kita memerlukannya untuk membatalkan pendaftaran skrip setelah proses penggabungan selesai.

2.) Kurangnya fleksibilitas. Jika ada penambahan atau pengurangan file javascript, kita harus menggabungkan ulang file tersebut secara manual.

3.) Tidak mungkin menjamin bahwa gabungan potongan kode tidak akan bertentangan. Ini ada hubungannya dengan urutan pemanggilan fungsi dan cakupan variabel javascript.

Cara Menggabungkan File Javascript di WordPress Menjadi Satu File - Secara Otomatis

Untuk menggabungkan file javascript secara otomatis di WordPress, Anda harus terlebih dahulu mengumpulkan jalur ke file javascript beserta nama pegangannya (mirip dengan metode manual, hanya secara otomatis).

Kita dapat menemukan semua informasi tentang file javascript yang dimuat di halaman WordPress di objek WP_Scripts.

Objek ini disimpan dalam variabel $wp_scripts dan dipanggil di bagian templat seperti wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init. Berikut adalah beberapa kasus yang paling umum.

Sekali. Di head (tag) kita dapat mendefinisikannya menggunakan hook wp_head.

Berdua.

Di footer (sebelum tag) kita dapat mendefinisikannya menggunakan hook wp_footer.

Buka file function.php untuk diedit, terletak di folder tema yang digunakan, dan tambahkan kode di sana:
Kode: add_action("wp_head", "show_head_scripts", 9999);

add_action("wp_footer", "show_footer_scripts", 9999);
// Muncul di bagian atas, sebelum membuka isi
fungsi show_head_scripts())(
global $wp_scripts;
}
gema ""; print_r($wp_scripts->selesai); gema "";
// Muncul di bawah, setelah basement
fungsi show_head_scripts())(
global $wp_scripts;
}

fungsi show_footer_scripts())(

Sekarang kita buka halamannya, lihat sumbernya dan lihat daftar jalur ke file JS (di bagian atas dan bawah halaman).

Untuk menggabungkan, Anda perlu mengumpulkan jalur ke file yang dapat dideteksi secara otomatis sebelum konten ditampilkan. Kait wp_enqueue_scripts cocok untuk ini. Ada beberapa kelemahannya (dijelaskan di bawah), tapi ini satu-satunya trik yang bisa kita gunakan secara otomatis.

Cara melakukannya (deskripsi logika kode):

1.) Pegangan file javascript disalin sesuai dengan ketergantungannya sehingga setelah digabungkan dapat berjalan tanpa kesalahan. Kita dapat melakukan ini dengan memanggil metode all_deps pada objek WP_Scripts($wp_scripts->all_deps($wp_scripts->queue));

2.) Mengambil kode dalam file javascript (menggunakan file_get_contents) dan menggabungkannya dengan yang lain. Termasuk skrip lokalisasi wp_localize_script (jika tersedia). Skrip ini dapat ditemukan di $ wp_scripts-> terdaftar ["handle"] -> extra ["data"]

3.) Tulis kode gabungan ke file (menggunakan file_put_contents) dan muat menggunakan fungsi wp_enqueue_scripts.

4.) Unreg semua script/handle yang telah digabungkan, hal ini dilakukan setelah menyelesaikan proses yang dijelaskan pada paragraf sebelumnya (jika kita unreg sebuah script, maka script dependennya juga akan unreg).

Untuk membuat mesin melakukan semua tugas ini, tempelkan kode berikut ke dalam file function.php:

Kode: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
fungsi merge_all_scripts()
{
fungsi show_head_scripts())(

/*
#1. Susun ulang pegangan berdasarkan ketergantungannya,
Hasilnya akan disimpan di properti to_do ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->antrian);

// Lokasi file baru: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . "skrip-gabungan.js";

$skrip_gabungan = "";

// Ulangi file javascript dan simpan ke variabel $merged_script
foreach($wp_scripts->yang harus dilakukan sebagai $handle)
{
/*
Bersihkan url, misalnya wp-content/themes/wdc/main.js?v=1.2.4
menjadi wp-content/themes/wdc/main.js
*/
$src = strtok($wp_scripts->terdaftar[$handle]->src, "?");

/**
#2. Gabungkan file javascript.
*/
// Jika src adalah url http/https
jika (strpos($src, "http") !== salah)
{
// Dapatkan url situs kami, misalnya: http://webdevzoom.com/wordpress
$situs_url = situs_url();

/*
Jika kita berada di server lokal, ubah url ke jalur relatif,
misalnya http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
menjadi: /wp-content/plugins/wpnewsman/css/menuicon.css,
ini untuk menggunakan kembali Permintaan HTTP

Jika tidak, mis. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
lalu biarkan apa adanya (kami akan melewatkannya)
*/
jika (strpos($src, $site_url) !== salah)
$js_file_path = str_replace($site_url, "", $src);
kalau tidak
$js_file_path = $src;

/*
Untuk dapat menggunakan fungsi file_get_contents kita perlu menghapus garis miring,
misalnya /wp-content/plugins/wpnewsman/css/menuicon.css
menjadi wp-content/plugins/wpnewsman/css/menuicon.css
*/
$js_file_path = ltrim($js_file_path, "/");
}
kalau tidak
{
$js_file_path = ltrim($src, "/");
}

// Periksa apakah file ada lalu gabungkan
jika (file_ada($js_file_path))
{
// #3. Periksa wp_localize_script
$lokalisasi = "";
if (@key_exists("data", $wp_scripts->terdaftar[$handle]->ekstra)) (
$lokalisasi = $obj->ekstra["data"] . ";";
}
$merged_script .= $lokalisasi . file_get_contents($js_file_path) . ";";
}
}

// tulis skrip yang digabungkan ke dalam direktori tema saat ini
file_put_contents($merged_file_location, $merged_script);

// #4. Muat URL file yang digabungkan
wp_enqueue_script("skrip-gabungan", get_stylesheet_directory_uri() . "/merged-script.js");

// 5. Batalkan pendaftaran pegangan
foreach($wp_scripts->yang harus dilakukan sebagai $handle)
{
wp_deregister_script($handle);
}
}

Memeriksa apakah merger berhasil

Buka halaman blog, buka sumbernya dan cari file gabungan-script.js yang terhubung di dalamnya

Kemudian pastikan tidak ada kesalahan pada skrip gabungan dengan membuka "alat pengembang" browser Anda (tekan F12 di Google Chrome) dan memilih tab Konsol.

Konsol menampilkan teks kesalahan dan merujuk lokasi terjadinya kesalahan. Jika tidak ada kata-kata makian pada file merge-script.js, maka semuanya baik-baik saja.

Periksa fungsionalitas skrip lain yang tidak berpartisipasi dalam penggabungan.

Artikel asli dalam bahasa Inggris yang Anda baca di sana.

Waktu membaca: 2 menit.

Diterbitkan 20/04/2017

Halo! Kami terus menganalisis plugin paling menarik dan berguna untuk situs WordPress! Hari ini Anda akan mempelajari cara menggabungkan file CSS dan JS untuk mengoptimalkan situs web Anda. Secara default, semua file CSS dan JS ditampilkan secara terpisah, sehingga menimbulkan beban di situs. Anda dapat menggabungkan file-file ini menjadi satu file untuk membuat situs memuat lebih cepat. Plugin yang sangat sederhana dan berguna! Anda dapat menginstal plugin langsung dari panel admin WordPress. Buka halaman: Plugin – Tambahkan yang baru

, masukkan nama plugin di form pencarian, tekan Enter, instal dan aktifkan plugin.

– Gunakan Kompas, centang kotak di sini untuk mengaktifkan plugin.

– Jalur kompiler kompas, jalur kompiler file ditunjukkan di sini.

– Jalur kompiler Sass (hanya diperlukan untuk format .sass – bukan .scss), jalur (alamat) untuk file CSS.

– Jalur compiler CoffeeScript, jalur untuk skrip.

– Kompres skrip, optimalkan skrip.

– Atribut async pada tag skrip footer, memuat skrip secara asinkron.

– Sumber daya yang akan dikecualikan, di sini Anda dapat mengecualikan skrip atau gaya tertentu.

– Aktifkan Log, aktifkan pencatatan file log.

– Mode Pengembangan, jika Anda mengaktifkan parameter ini, cache akan dihapus setiap kali halaman dimuat ulang.

– Simpan, simpan perubahannya.

– Kosongkan Cache AssetsMinify, klik tab ini untuk menghapus cache secara manual.

Semuanya sudah siap!

Setelah menyimpan pengaturan, semua skrip dan gaya di situs Anda akan digabungkan menjadi satu file. Ini mengacu pada skrip dan gaya yang muncul di kode sumber situs Anda. Dengan cara ini situs Anda akan dimuat lebih cepat! Metode Object.assign() menyalin semua properti enumerable dari satu atau lebih objek sumber ke a objek sasaran

. Ini mengembalikan objek target.

Sumber untuk contoh interaktif ini disimpan di repositori GitHub. Jika Anda ingin berkontribusi pada proyek contoh interaktif, harap kloning https://github.com/mdn/interactive-examples dan kirimkan permintaan penarikan kepada kami.

Sintaks Objek.assign(target , ... sumber) Parameter target Objek target - untuk apa properti sumber diterapkan, yang dikembalikan setelah diubah.

sumber Objek sumber - objek berisi properti yang ingin Anda terapkan. Nilai kembalian

Objek sasaran.

Keterangan Properti di objek target ditimpa oleh properti di sumber jika memiliki kunci yang sama. Properti sumber selanjutnya akan menimpa properti sebelumnya. Metode Object.assign() hanya menyalin dapat dihitung Dan memiliki properti dari objek sumber ke objek target. Ia menggunakan [] pada sumber dan [] pada target, sehingga akan memanggil getter dan setter. Oleh karena itu

menugaskan

properti, dibandingkan menyalin atau mendefinisikan properti baru. Hal ini mungkin membuatnya tidak cocok untuk menggabungkan properti baru ke dalam prototipe jika sumber gabungan berisi pengambil.

Untuk menyalin definisi properti (termasuk enumerabilitasnya) ke dalam prototipe, gunakan Object.getOwnPropertyDescriptor() dan Object.defineProperty() sebagai gantinya.

Properti String dan Simbol disalin.

Untuk kloning mendalam, kita perlu menggunakan alternatif, karena Object.assign() menyalin nilai properti.

Jika nilai sumber adalah referensi ke suatu objek, nilai referensi hanya disalin.

Fungsi test() ("gunakan ketat"; biarkan obj1 = ( a: 0 , b: ( c: 0)); biarkan obj2 = Object.assign((), obj1); console.log(JSON.stringify(obj2) ); // ( "a": 0, "b": ( "c": 0)) obj1.a = 1; konsol.log(JSON.stringify(obj1)); 0)) console.log(JSON.stringify(obj2)); // ("a": 0, "b": ("c": 0)) obj2.a = 2 ; obj1)); // ( "a": 1, "b": ( "c": 0)) konsol.log(JSON.stringify(obj2)); : 0)) obj2.b.c = 3; console.log(JSON.stringify(obj1)); // ( "a": 1, "b": ( " c": 3)) console.log(JSON.stringify (obj2)); // ( "a": 2, "b": ( "c": 3)) // Klon Dalam obj1 = ( a: 0 , b: ( c: 0)); .parse(JSON.stringify(obj1)); obj1.a = 4; console.log(JSON.stringify(obj3)); ( "a": 0, "b": ( "c": 0)) ) pengujian ();

Menggabungkan objek const o1 = ( a: 1 ); konstanta o2 = ( b: 2 ); konstanta o3 = ( c: 3 ); const obj = Objek.assign(o1, o2, o3); konsol.log(obj); // ( a: 1, b: 2, c: 3 ) konsol.log(o1); // ( a: 1, b: 2, c: 3 ), objek target itu sendiri diubah. Menggabungkan objek dengan properti yang sama const o1 = ( a: 1, b: 1, c: 1 ); konstanta o2 = ( b: 2, c: 2 ); konstanta o3 = ( c: 3 ); const obj = Objek.assign((), o1, o2, o3); konsol.log(obj); // ( a: 1, b: 2, c: 3 )

Properti tersebut ditimpa oleh objek lain yang memiliki properti yang sama di kemudian hari dalam urutan parameter.

Menyalin properti yang diketik simbol const o1 = ( a: 1 ); konstanta o2 = ( : 2 ); const obj = Objek.assign((), o1, o2); konsol.log(obj); // ( a: 1, : 2 ) (lih. bug 1207182 di Firefox) Object.getOwnPropertySymbols(obj); // Properti pada rantai prototipe dan properti yang tidak dapat dihitung tidak dapat disalin const obj = Object.create(( foo: 1 ), ( // foo ada pada rantai prototipe obj. bar: ( nilai: 2 // bar adalah properti yang tidak dapat dihitung. ), baz: ( nilai: 3, dapat dihitung: benar // baz adalah properti yang dapat dihitung sendiri. ) )); const copy = Object.assign((), obj); 3 ) Primitif akan digabungkan ke objek const v1 = "abc"; const v3 = 10; const v4 = const obj = Object.assign(()) , v1, null, v2, undefined, v3, v4); akan dibungkus, null dan tidak terdefinisi akan diabaikan. // Catatan, hanya pembungkus string yang dapat memiliki properti enumerable console.log(obj); : "c" ) Pengecualian akan mengganggu tugas penyalinan yang sedang berlangsung const target = Object.defineProperty((), "foo", ( value: 1 , writable: false )); // target.foo adalah properti read-only Object. menetapkan(target, ( bar: 2), ( foo2: 3, foo: 3, foo3: 3), ( baz: 4 )) ; // TypeError: "foo" hanya-baca // Pengecualian dilempar saat menugaskan target.foo konsol.log(target.bar); // 2, sumber pertama berhasil disalin. konsol.log(target.foo2); // 3, properti pertama dari sumber kedua berhasil disalin. konsol.log(target.foo); // 1, pengecualian diberikan di sini. konsol.log(target.foo3); // tidak terdefinisi, metode penetapan telah selesai, foo3 tidak akan disalin. konsol.log(target.baz); // tidak terdefinisi, sumber ketiga juga tidak akan disalin. Menyalin pengakses const obj = ( foo: 1, get bar() ( return 2; ) ); biarkan salin = Objek.tugaskan((), obj); console.log(salinan); // ( foo: 1, bar: 2 ) // Nilai copy.bar adalah nilai kembalian pengambil obj.bar. // Ini adalah fungsi penetapan yang menyalin fungsi deskriptor lengkap completeAssign(target, ...sources) ( source.forEach(source => ( let descriptors = Object.keys(source).reduce((deskriptor, kunci) => ( deskriptor = Object.getOwnPropertyDescriptor(source, key); return descriptors; ), ()); // Secara default, Object.assign juga menyalin Simbol yang dapat dihitung Object.getOwnPropertySymbols(source).forEach(sym => ( let descriptor = Object .getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable) (deskriptor = deskriptor; )); console.log(salinan); // ( foo:1, dapatkan bar() ( kembalikan 2 ) ) Polyfill

Polyfill ini tidak mendukung properti simbol, karena ES5 tidak memiliki simbol:

If (typeof Object.assign !== "function") ( // Harus dapat ditulis: benar, dapat dihitung: salah, dapat dikonfigurasi: true Object.defineProperty(Objek, "assign", ( nilai: fungsi menetapkan(target, varArgs) ( // .panjang fungsi adalah 2 "gunakan ketat"; if (target === null || target === tidak terdefinisi) ( throw new TypeError("Tidak dapat mengonversi yang tidak terdefinisi atau null menjadi objek"); ) var to = Object( target); untuk (var indeks = 1; indeks< arguments.length; index++) { var nextSource = arguments; if (nextSource !== null && nextSource !== undefined) { for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to = nextSource; } } } } return to; }, writable: true, configurable: true }); }

Spesifikasi Spesifikasi

Draf Terbaru ECMAScript (ECMA-262)
Definisi "Object.assign" dalam spesifikasi itu.

Kompatibilitas peramban

Tabel kompatibilitas di halaman ini dihasilkan dari data terstruktur. Jika Anda ingin berkontribusi pada data, silakan periksa https://github.com/mdn/browser-compat-data dan kirimkan permintaan penarikan kepada kami.

Perbarui data kompatibilitas di GitHub

Server Seluler Desktop Chrome Edge Firefox Internet Explorer Opera Safari Tampilan web Android Chrome untuk Android Firefox untuk Android Opera untuk Android Safari di iOS Samsung Internet Node.jsmenetapkan

Dukungan penuh Chrome 45

Dukungan penuh Edge 12

Dukungan penuh Firefox 34

YAITU Tidak ada dukungan Tidak

Dukungan penuh Opera 32

Safari Dukungan penuh 9

WebView Android Dukungan penuh 45

Chrome Android Dukungan penuh 45

Firefox Android Dukungan penuh 34

Opera Android Dukungan penuh 32

Safari iOS Dukungan penuh 9

Samsung Internet Android Dukungan penuh 5.0

nodejs Dukungan penuh 4.0.0

Legenda Dukungan penuh Dukungan penuh Tidak ada dukungan Tidak ada dukungan

Saya mencoba mengoptimalkan kinerja situs dengan menggabungkan dan mengompresi file CSS dan JS. Pertanyaan saya lebih terkait dengan langkah-langkah (spesifik) tentang cara mencapai hal ini, mengingat situasi aktual yang saya temui (meskipun hal ini juga umum terjadi pada pengembang lain).

Untuk rilis produk, saya ingin menggabungkan 3 file CSS menjadi satu dan mengompresnya menggunakan, misalnya Kompresor YUI. Tapi kemudian saya harus memperbarui semua halaman yang memerlukan 3 file tersebut untuk ditautkan ke CSS yang baru diubah. Tampaknya ini rawan kesalahan (misalnya Anda menghapus dan menambahkan beberapa baris ke banyak file). Adakah pendekatan lain yang tidak terlalu berisiko? Masalah yang sama untuk file JS.

13 jawaban

Penyortiran:

Aktivitas

Anda dapat menjalankannya dalam tugas semut dan karenanya memasukkannya ke dalam pesan/kait pra komit Anda jika Anda menggunakan svn/git.

PEMBARUAN: Saat ini saya menggunakan grunt dengan CONCAT, meremehkan & merusak kontribusi. Anda dapat menggunakannya dengan pengamat untuk membuat minifile baru di latar belakang setiap kali sumbernya berubah. uglify contrib tidak hanya membagi log konsol, tetapi juga menghapus fungsi dan properti yang tidak digunakan.

Saya perlu memperbarui semua halaman yang memerlukan 3 file ini untuk ditautkan ke CSS yang baru di-root.

Pertama, menurut saya Anda harus memiliki judul umum. Jadi tidak perlu mengubah semua header bila diperlukan. Praktik yang baik adalah memiliki satu heading atau 2-3. Karena halaman Anda diperlukan, Anda dapat mengubah judul Anda. Jadi ketika Anda ingin memperluas aplikasi web Anda, risikonya akan lebih kecil dan membosankan.

Anda tidak menyebutkan lingkungan pengembangan Anda. Anda dapat melihat bahwa ada banyak alat kompresi yang terdaftar untuk lingkungan berbeda. Dan Anda menggunakan alat yang bagus yaitu Kompresor YUI.

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

Menggunakan plugin memberi Anda kemampuan untuk menjaga versi yang tidak terkompresi tetap tersedia untuk diedit, dan kemudian ketika Anda membuat perubahan, plugin secara otomatis menggabungkan perubahan Anda dan mengompresi ulang file. Pastikan Anda memilih plugin yang memungkinkan Anda mengecualikan file (seperti file js khusus) jika ada kerusakan.

Saya pernah mencoba menyimpan file-file ini secara manual dan selalu berubah menjadi mimpi buruk pemeliharaan. Selamat mencoba, semoga ini membantu.

Jika Anda melakukan pra-pemrosesan file yang Anda sajikan, Anda mungkin ingin menyiapkan sistem build yang tepat (seperti Makefile). Dengan cara ini Anda memiliki file asli tanpa duplikasi, dan setiap kali Anda membuat perubahan, Anda menjalankan "make" dan memperbarui semua file yang dibuat secara otomatis. Jika Anda sudah menginstal sistem build, pelajari cara kerjanya dan menggunakannya. Jika tidak, Anda perlu menambahkannya.

Jadi, pertama-tama cari tahu cara menggabungkan dan mengecilkan file Anda dari baris perintah (dalam dokumentasi YUICompressor). Tentukan direktori untuk materi yang dibuat secara otomatis, terpisah dari materi yang sedang Anda kerjakan tetapi dapat diakses oleh server web, dan hasilkan di sana, seperti gen/scripts/combination.js. Tempatkan perintah yang Anda gunakan di Makefile dan ulangi "make" setiap kali Anda membuat perubahan dan ingin perubahan itu diterapkan. Kemudian perbarui header di file lain agar mengarah ke file gabungan dan mini.

Bagi orang yang menginginkan sesuatu yang lebih ringan dan fleksibel, saya membuat js.sh hari ini untuk mengatasi masalah ini. Ini adalah alat baris perintah sederhana yang menargetkan file JS, yang dapat dengan mudah dimodifikasi untuk menangani file CSS. Keuntungan:

Mudah disesuaikan untuk digunakan oleh banyak pengembang dalam suatu proyek
Menggabungkan file JS dalam urutan yang ditentukan dalam script_order.txt
kompres dengan Closure Compiler Google
Pisahkan JS menjadi< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
Membuat file PHP kecil dengan tag yang dapat Anda sertakan jika diperlukan
Penggunaan: js.sh -u namamu

Ini mungkin memerlukan beberapa perbaikan, tapi ini lebih baik untuk kasus penggunaan saya daripada semua solusi lain yang pernah saya lihat sejauh ini.

Langkah optimasi pertama adalah meminimalkan file. (Saya sangat merekomendasikan GULP untuk minifikasi dan pengoptimalan. Ini solusi sederhana selama berjam-jam, instalasi dan semua file dikompresi sekaligus. Mendukung semua CSS, JS, less, sass, dll.)

ATAU Solusi jadul:

1) Secara umum, sebagai proses optimasi, mengoptimalkan kinerja situs, coba gabungkan semua CSS menjadi satu file dan kompres file tersebut menggunakan Compass. Dengan cara ini beberapa permintaan Anda untuk CSS statis akan diganti dengan satu.

2) Masalah beberapa JS, yang dapat Anda atasi dengan menggunakan CDN (atau Perpustakaan yang dihosting Google) sehingga permintaan dikirim ke server yang berbeda dari server Anda. Dengan cara ini, server tidak menunggu permintaan sebelumnya selesai sebelum mengirimkan permintaan berikutnya.

3) Jika Anda memiliki JavaScript yang disimpan secara lokal, sembunyikan setiap file menggunakan plugin Brackets "Compress JavaScript". Pada dasarnya hanya satu klik untuk mengompres JavsScript. Brackets adalah editor gratis untuk CSS dan JS, tetapi dapat digunakan untuk PHP dan bahasa lainnya. Ada banyak plugin yang dapat dipilih baik untuk pengembang front-end maupun pihak ketiga. Secara umum, “satu klik” untuk menjalankan semua perintah ini (masih banyak). Btw, tanda kurung menggantikan Dreamweaver saya yang sangat mahal;)

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

Catatan: Bahkan tanpa menggunakan campuran atau variabel, CSS Anda akan dikompresi (cukup menggunakan CSS murni dan perintah "tampilan" Compass akan mengompresnya untuk Anda).

Semoga ini bisa membantu!

Dalam proyek simfoni saya, saya melakukan sesuatu seperti ini

(#layout.html.twig #) (% gaya blok %) (% if app.environment == "prod" %) (% else %) (% endif %) (% endblock %) (# some-view.html .twig #) (% extends "AppMainBundle::layout.html.twig" %) (% blok gaya %) (( parent() )) (% if app.environment != "prod" %) (% else %) (%blok akhir%)

Ketika versi DEV siap untuk produksi saya gunakan

OTOMATIS