Unduh critters - Unduh Kode Sumber critters

critters

Kode sumber lainnya

3.0.2

Unduh

Peringatan

Kepemilikan Critters telah pindah ke tim Nuxt, yang akan mempertahankan proyek ke depan. Jika Anda ingin terus menggunakan makhluk, silakan beralih ke garpu yang dipertahankan secara aktif di https://github.com/danielroe/beasties. Repo ini sekarang diarsipkan dan tidak akan menerima pembaruan di masa depan.

Makhluk

Critters adalah plugin yang memasukkan CSS kritis aplikasi Anda dan memuat sisanya.

makhluk

Ini sedikit berbeda dari opsi lain, karena tidak menggunakan browser tanpa kepala untuk membuat konten. Pengorbanan ini memungkinkan makhluk menjadi sangat cepat dan ringan . Ini juga berarti makhluk-makhluk memasang semua aturan CSS yang digunakan oleh dokumen Anda, bukan hanya yang diperlukan untuk konten di atas lipat. Untuk alternatif, lihat perpustakaan serupa.

Desain Critters 'membuatnya sangat cocok saat memasang CSS kritis untuk aplikasi satu halaman tunggal yang prahender/SSR. Ini dikembangkan sebagai pujian yang sangat baik untuk prerender-loader, menggabungkan untuk secara dramatis meningkatkan waktu cat pertama untuk sebagian besar aplikasi satu halaman.

Fitur

Cepat - Tidak ada browser, sedikit dependensi
Terintegrasi dengan Webpack Critters-Webpack-Plugin
Mendukung preloading dan/atau inlining font kritis
PRUNES CSS Keyframe dan kueri media yang tidak digunakan
Menghapus aturan CSS yang diastrasi dari stylesheet yang dimuat malas

Instalasi

Pertama, instal makhluk sebagai ketergantungan pengembangan:

 NPM I -D makhluk

atau

 Benang Tambahkan -D Makhluk

Contoh sederhana

 Impor makhluk dari 'makhluk'; const critters = makhluk baru ({
  // konfigurasi opsional (lihat di bawah)}); const html = `<tyle> .red {color: red} .blue {color: blue} </tyle> <div class =" blue "> I'm blue <// Div> `; const inlined = menunggu makhluk critters.process (html); console.log (inlined); // "<tyle> .blue {color: blue} </style> <div class =" blue "> I'm blue </div>"

Penggunaan dengan Webpack

Critters juga tersedia sebagai plugin webpack bernama Critters-Webpack-Plugin.

Plugin webpack mendukung opsi konfigurasi yang sama dengan paket critters utama:

 // webpack.config.js+const critters = membutuhkan ('critters-webpack-plugin'); module.exports = {
  Plugin: [+ Critters Baru ({+ // Konfigurasi Opsional+ Preload: 'Swap',+ Certikasi Selertas: [/^.btn/, '.BANNER'],+})
  ]
}

Itu saja! HTML yang dihasilkan akan memiliki CSS kritis yang diinstal dan stylesheets malas.

Penggunaan

Makhluk

Semua opsional. Berikan mereka ke new Critters({ ... }) .

Parameter

options

Properti

Lokasi jalur dasar string string path file CSS (default: '' )
Jalur publik publicPath String dari Sumber Daya CSS. Awalan ini dihapus dari href (default: '' )
Gaya inline boolean external dari stylesheet eksternal (default: true )
Nomor inlineThreshold inline stylesheets eksternal lebih kecil dari ukuran yang diberikan (default: 0 )
Nomor minimumExternalSize Jika stylesheet eksternal non-kritis akan berada di bawah ukuran ini, cukup selarur (default: 0 )
pruneSource Boolean Hapus aturan inline dari stylesheet eksternal (default: false )
mergeStylesheets Boolean menggabungkan stylesheet inlined menjadi tag <style> tunggal (default: true )
additionalStylesheets Array Array <string> Glob untuk mencocokkan stylesheet lain yang akan digunakan sambil mencari CSS kritis.
reduceInlineStyles Opsi Boolean Boolean Menunjukkan apakah gaya inline harus dievaluasi untuk CSS kritis. Secara default, tag gaya inline akan dievaluasi dan ditulis ulang untuk hanya mengandung CSS kritis. Atur ke false untuk melewatkan gaya inline pemrosesan. (default: true )
preload string yang digunakan strategi preload mana
noscriptFallback Boolean Add <noscript> Fallback ke Strategi Berbasis JS
aturan font-font font font font inlinefont boolean inlineFonts ( false )
preloadFonts boolean preloads font kritis (default: true )
fonts Boolean Shorthand untuk mengatur inlineFonts + preloadFonts * Nilai:

true aturan font-font kritis inline dan preload font
false untuk tidak melapisi aturan font-face dan jangan memuat font preload

keyframes String mengontrol aturan kerangka kunci mana yang dilapisi.* Nilai:

"critical" : (default) aturan bingkai kunci inline yang digunakan oleh CSS kritis
"all" inline semua aturan kerangka kunci
"none" hapus semua aturan kerangka kunci

compress kompres kompres boolean menghasilkan css kritis (default: true )
logLevel String mengontrol level log plugin (default: "info" )
Objek logger Menyediakan Logger Antarmuka Logger Kustom
includeSelectors selektor regexp | String menyediakan daftar pemilih yang harus dimasukkan dalam CSS kritis. Menerima regexp dan string.

Sertakan/mengecualikan aturan

Kami dapat memasukkan atau mengecualikan aturan untuk menjadi bagian dari CSS kritis dengan menambahkan komentar di CSS

Komentar baris tunggal untuk memasukkan/mengecualikan aturan CSS berikutnya

 / * Critters: Kecualikan */. Selector1 {/ * Aturan ini akan dikecualikan dari CSS kritis */}

.selector2 {/ * Ini akan dievaluasi secara normal */}/ * makhluk: sertakan */. selector3 {/ * aturan ini akan dimasukkan dalam css kritis */}

.selector4 { / * ini akan dievaluasi secara normal * /}

Termasuk/tidak termasuk beberapa aturan dengan menambahkan penanda awal dan akhir

 / * Critters: Kecualikan Mulai */. Selector1 {/ * Aturan ini akan dikecualikan dari CSS kritis */}

.selector2 {/ * aturan ini akan dikecualikan dari css kritis */}/ * makhluk: tidak termasuk akhir */

 / * Critters: Sertakan Mulai */. Selector3 {/ * Aturan ini akan dimasukkan dalam CSS kritis */}

.selector4 {/ * aturan ini akan dimasukkan dalam css kritis */}/ * makhluk: sertakan akhir */

Wadah makhluk

Secara default makhluk default mengevaluasi CSS terhadap seluruh input HTML. Critters mengevaluasi CSS kritis dengan merekonstruksi seluruh DOM dan mengevaluasi pemilih CSS untuk menemukan node yang cocok. Biasanya ini berfungsi dengan baik karena makhluk ringan dan cepat.

Untuk beberapa kasus, input HTML bisa sangat besar atau sangat bersarang yang membuat DOM yang direkonstruksi jauh lebih besar, yang pada gilirannya dapat memperlambat generasi CSS kritis. Critters tidak mengetahui ukuran viewport dan node spesifik apa di atas lipatan karena tidak ada browser tanpa kepala yang terlibat.

Untuk mengatasi masalah ini makhluk menggunakan wadah makhluk .

Wadah Critters meniru viewport dan dapat diaktifkan dengan menambahkan data-critters-container ke dalam wadah tingkat atas yang berisi elemen HTML di atas lipatan.

Anda dapat memperkirakan konten viewport Anda secara kasar dan menambahkan <Div data-critters-container > di sekitar konten.

 <Html>
  <body> <v class = "container"> <div data-critters-container>/ * html di dalam wadah ini digunakan untuk mengevaluasi css kritis */</div>/ * html diabaikan saat mengevaluasi css kritis */</</</</ Div> <footer> </footer>
  </body> </html>

Catatan: Ini adalah cara mudah untuk meningkatkan kinerja makhluk

Logger

Antarmuka Logger Kustom:

Jenis: Objek

Properti

Function trace (String) Mencetak pesan jejak
debug Function (String) mencetak pesan debug
Fungsi info (String) Mencetak pesan informasi
warn Function (String) mencetak pesan peringatan
fungsi error (string) mencetak pesan kesalahan

Loglevel

Kontrol level log plugin. Menentukan level yang harus digunakan penebang. Logger tidak akan menghasilkan output untuk tingkat log apa pun di bawah level yang ditentukan. Tingkat dan pesanan yang tersedia adalah:

"Info" (default)
"memperingatkan"
"kesalahan"
"jejak"
"Debug"
"diam"

PreloadStrategy

Mekanisme untuk digunakan untuk stylesheet pemuatan malas.

Catatan: JS menunjukkan strategi yang membutuhkan JavaScript (jatuh kembali ke <noscript> kecuali dinonaktifkan).

Default: Pindahkan tautan stylesheet ke akhir dokumen dan masukkan tag meta preload di tempatnya.
"Body": Pindahkan semua tautan stylesheet eksternal ke akhir dokumen.
"Media": Load Stylesheets secara tidak sinkron dengan menambahkan media="not x" dan menghapus sekali dimuat. JS
"SWAP": Konversi tautan stylesheet ke preloads yang bertukar ke rel="stylesheet" setelah dimuat (detail). JS
"Swap-High": Gunakan <link rel="alternate stylesheet preload"> dan swap ke rel="stylesheet" setelah dimuat (detail). JS
"JS": menyuntikkan css loader asinkron mirip dengan LoadCSS dan menggunakannya untuk memuat lembar styles. JS
"JS-Lazy": seperti "js" , tetapi stylesheet dinonaktifkan sampai dimuat sepenuhnya.
Salah: Menonaktifkan menambahkan tag preload.

Perpustakaan serupa

Ada sejumlah perpustakaan lain yang dapat menyambung CSS kritis, masing -masing dengan pendekatan yang sedikit berbeda. Berikut beberapa pilihan bagus: