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
Berkas HTML AndaSekarang 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;0. Saya mengandalkannya untuk menyetel ulang gaya browser, tetapi banyak komponen terkait tidak akan pernah cocok karena dihasilkan dalam JavaScript
Dalam kasus kelas yang dimulai dengan @tailwind utilities;/* normalize.src.css */ @tailwind preflight;_1, kita dapat menyelesaikannya dengan. Sekarang ketika mengatur ulang gaya, penyeleksi sedikit lebih sulit untuk dilacak. Selain itu, ukuran @tailwind utilities;/* normalize.src.css */ @tailwind preflight;_0 cukup tidak signifikan dan tidak akan berubah. Jadi dalam hal ini, saya memutuskan untuk mengabaikan file tersebut sama sekali. Akibatnya, saya harus membagi gaya sebelum menjalankan PurgeCSS
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" }}_2 memuat @tailwind utilities;/* normalize.src.css */ @tailwind preflight;0. Saya tidak ingin PurgeCSS menyentuhnya, jadi saya memindahkannya ke file terpisah
// 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" }}_4 saya yang ada di @tailwind utilities;/* normalize.src.css */ @tailwind preflight;9 untuk membangun { "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" }}6 secara terpisah
{ "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;_0 dalam proyek
// 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" }}0 tanpa takut itu akan menghapus aturan yang diperlukan
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" }}9 untuk mendapatkannya kembali dan mengelolanya langsung di proyek
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_0 di akar proyek
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.js3 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
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.js5. Mudahnya, PurgeCSS mendukung pola dalam bentuk ekspresi reguler
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;8, itu akan dikeluarkan dari build terakhir, tetapi pemilih InstantSearch saya akan tetap aman
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