Bagaimana cara kerja pembersihan css?

Saat membuat aplikasi web, kami sering menggunakan framework go-to CSS (bootstrap, tailwindcss…) yang hadir dengan banyak hal berguna yang menormalkan dan mempercepat proses pembuatan UI kami. Kerangka juga datang dengan banyak bagasi, banyak sekali. Sebagian besar UI kami tidak terlalu rumit dan kami tidak menggunakan sebagian besar kerangka kerja CSS yang kami gunakan. Bahkan ketika kami membangun dan mengimplementasikan Sistem Desain Anda sendiri dari awal, Anda akan selalu memiliki CSS yang tidak digunakan dalam proyek atau aplikasi apa pun

PurgeCSS adalah cara yang bagus untuk mengoptimalkan hasil akhir Anda agar hanya berisi CSS yang Anda butuhkan dan gunakan. Dalam aplikasi sederhana saya, saya telah menerapkan PurgeCSS, dan saya telah melihat antara 70-90% penurunan ukuran CSS final dan penurunan waktu render yang signifikan

PurgeCSS berfungsi dengan sebagian besar bundler javascript dan alat pembuatan web. Itu juga dilengkapi dengan alat CLI sendiri. Kasus penggunaan saya adalah integrasi mulus mereka dengan TailwindCSS di build NextJS. Ini adalah panduan yang bagus dan contoh repo github yang saya berikan saat saya bermain dengan ini

Mengurangi ukuran aset adalah salah satu cara paling praktis untuk mempercepat aplikasi web Anda. Saya memiliki kasus penggunaan sederhana, bayangkan file HTML Anda terlihat seperti ini

Sekarang lihat ________42______

Inti dari perpustakaan adalah memberi Anda akses ke seperangkat alat yang luas untuk digunakan sesuka hati. Masalahnya adalah, karena Anda biasanya hanya menggunakan sebagian saja, Anda berakhir dengan banyak aturan CSS yang tidak terpakai di build akhir Anda

Dalam kasus saya, saya tidak hanya memuat seluruh pustaka Tailwind CSS, tetapi saya juga menambahkan beberapa varian ke beberapa modul. Itu akhirnya membuat berat file CSS terakhir yang diperkecil menjadi 259 KB (sebelum GZip). Itu cukup berat jika Anda menganggap bahwa situs web tersebut adalah aplikasi satu halaman sederhana dengan desain minimal

Anda tidak ingin memuat setiap utilitas secara manual saat Anda membutuhkannya. Itu akan menjadi tugas yang panjang dan rumit. Skenario yang lebih baik adalah memiliki semua yang Anda inginkan selama pengembangan dan secara otomatis menghapus apa yang tidak Anda gunakan selama langkah pembuatan

Dalam JavaScript, kami menyebutnya tree-shaking. Sekarang, berkat PurgeCSS, Anda dapat melakukan hal yang sama dengan basis kode CSS Anda

PurgeCSS menganalisis file konten dan CSS Anda, lalu mencocokkan pemilih bersama. Jika tidak menemukan kemunculan pemilih dalam konten, itu akan menghapusnya dari file CSS

Sebagian besar, ini bisa berhasil di luar kotak. Namun, ada beberapa area di situs web mana pun yang mungkin memerlukan pemikiran lebih lanjut sebelum membiarkan PurgeCSS melakukan keajaibannya

Memisahkan CSS saya

Proyek ini berisi tiga file CSS utama

• Reset CSS disebut normalisasi. css, termasuk dalam Tailwind CSS
• Tailwind CSS, bagian terpenting dari basis kode CSS saya
• Beberapa CSS khusus, sebagian besar untuk menata komponen InstantSearch yang tidak dapat saya tambahkan kelasnya

PurgeCSS tidak dapat mendeteksi bahwa saya perlu menyimpan pemilih seperti .ais-Highlight, karena komponen yang menggunakannya hanya muncul di DOM saat runtime. Sama halnya dengan

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

Dalam kasus kelas yang dimulai dengan

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

Konfigurasi CSS awal saya terlihat seperti ini

• File

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  _3 dengan tiga arahan

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  4.

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  5,

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  6 dan

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  7
• File

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  _8 dengan gaya khusus saya
• Skrip npm di

  @tailwind utilities;/* normalize.src.css */ @tailwind preflight;

  _9 untuk membuat Tailwind CSS tepat sebelum memulai atau membuat proyek. Setiap kali skrip ini dijalankan, ia menghasilkan file

  {  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

  0 di

  {  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

  1, yang dimuat dalam proyek

Arahan

{  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

// tailwind.src.css @tailwind components;

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

Kemudian, saya mengubah skrip

{  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

{  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

{  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

Akhirnya, saya memuat

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

// src/index.js

...import './normalize.css'import './tailwind.css'import App from './App'...

Sekarang, saya dapat menjalankan PurgeCSS di

{  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

Mengkonfigurasi PurgeCSS

PurgeCSS hadir dalam banyak rasa. antarmuka baris perintah, API JavaScript, pembungkus untuk Webpack, Gulp, Rollup, dan seterusnya

Kami menggunakan Create React App untuk mem-bootstrap situs web, jadi Webpack berada di belakang skrip reaksi. Ini berarti saya tidak dapat mengakses file konfigurasi Webpack kecuali saya menjalankan

{  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

Tidak harus mengelola Webpack sendiri memiliki banyak keuntungan, jadi mengeluarkannya bukanlah suatu pilihan. Sebagai gantinya, saya memutuskan untuk menggunakan file konfigurasi khusus untuk PurgeCSS, dan skrip npm

Saya pertama kali membuat

// src/index.js

module.exports = {  content: ['src/App.js'],  css: ['src/tailwind.css']}

• Properti

  // src/index.js

  _1 mengambil larik file untuk dianalisis agar cocok dengan pemilih CSS
• Properti

  // src/index.js

  _2 mengambil larik stylesheet untuk dibersihkan

Kemudian, saya mengedit skrip npm saya untuk menjalankan PurgeCSS

{  "scripts": {    "start": "npm run css && react-scripts start",    "build": "npm run css && react-scripts build",    "css": "npm run tailwind && npm run purgecss",    "purgecss": "purgecss -c purgecss.config.js -o src"  }}

• Saya menambahkan skrip

  // src/index.js

  3 yang mengambil file konfigurasi saya dan menampilkan stylesheet yang telah dibersihkan di

  {  "scripts": {    "tailwind": "npm run tailwind:normalize && npm run tailwind:css",    "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css",    "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"  }}

  1
• Saya membuat skrip ini berjalan setiap kali kami memulai atau membangun proyek

Tailwind CSS menggunakan karakter khusus, jadi jika Anda langsung menggunakan PurgeCSS, ini dapat menghapus pemilih yang diperlukan. Untungnya, PurgeCSS memungkinkan kita untuk menggunakan , yang merupakan fungsi yang mencantumkan pemilih yang digunakan dalam file. Untuk Tailwind, saya perlu membuat yang khusus

module.exports = {  ..  extractors: [    {      extractor: class {        static extract(content) {          return content.match(/[A-z0-9-:\/]+/g) || []        },        extensions: ['js']      }    }  ]}

Mengizinkan kelas runtime

PurgeCSS tidak dapat mendeteksi kelas yang dihasilkan saat runtime, tetapi memungkinkan Anda menentukan daftar putih. Kelas yang Anda daftarkan putih tetap berada di file akhir apa pun yang terjadi

Proyek menggunakan React InstantSearch, yang menghasilkan komponen dengan kelas yang semuanya dimulai dengan

// src/index.js

module.exports = {  ..  css: ['src/tailwind.css', 'src/App.css'],  whitelistPatterns: [/ais-.*/],  ...}

Sekarang jika saya lupa untuk menghapus kelas yang tidak lagi saya gunakan dari

@tailwind utilities;/* normalize.src.css */ @tailwind preflight;

Build baru, CSS lebih ringan

Dengan konfigurasi baru ini, file CSS terakhir saya telah berubah dari 259 KB menjadi…9 KB. Ini cukup signifikan dalam konteks keseluruhan proyek, terutama karena banyak negara masih memiliki Internet yang lambat dan tidak stabil, dan semakin banyak orang menjelajah di ponsel mereka saat bepergian.

Aksesibilitas juga tentang melayani orang-orang dengan koneksi bandwidth rendah. Tidak dapat diterima untuk tidak mencoba dan membantu pengguna Anda dengan Internet yang lebih lambat, terutama jika yang Anda unduh adalah kode mati

Sebaiknya luangkan waktu sejenak untuk mengoptimalkan bangunan Anda. ?

Awalnya diterbitkan di frontstuff. io

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

Jika artikel ini bermanfaat, tweetlah

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Haruskah saya menggunakan PurgeCSS?

Bagaimana cara menggunakan PurgeCSS dengan Bootstrap?

Apa itu pembersihan di tailwind CSS?

Apakah Webpack menghapus CSS yang tidak digunakan?