Tailwind CSS Academy · Pelajaran

Menganalisis dan Mengurangkan Saiz Bundle

Ukur saiz keluaran CSS akhir, kenal pasti gaya tidak digunakan yang terlepas, dan laraskan glob kandungan anda untuk kecekapan purge maksimum.

Pelajaran 3 daripada 413 langkah

Menganalisis dan Mengurangkan Saiz Bundle ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Mengapa Saiz Himpunan Masih Penting dengan JIT

Enjin JIT Tailwind menghapuskan kebanyakan CSS yang tidak digunakan secara automatik, tetapi saiz himpunan masih boleh meningkat jika anda tidak berhati-hati. Glob kandungan yang dikonfigurasi dengan tidak betul boleh memasukkan terlalu banyak fail, senarai dibenarkan yang besar boleh menambah ratusan kelas, atau nilai sewenang-wenangnya yang kompleks boleh membesarkan output.

Projek Tailwind yang dikonfigurasi dengan baik juga mendapat manfaat daripada pengauditan himpunan secara berkala untuk mengesahkan bahawa output adalah sekecil yang sepatutnya dan mengesan isu konfigurasi sebelum isu tersebut sampai ke pengeluaran.

Mengukur Saiz Output CSS Anda

Langkah pertama untuk menganalisis himpunan anda ialah mengetahui saiz semasanya. Bina CSS Tailwind anda dalam mod pengeluaran dan semak saiz fail sebelum dan selepas pemampatan serta mampatan gzip.

Gunakan wc -c untuk menyemak bait mentah, kemudian bandingkan saiz yang dimampatkan dengan gzip, iaitu saiz yang sebenarnya dimuat turun oleh pelayar. Helaian gaya Tailwind untuk pengeluaran yang dioptimumkan dengan baik biasanya berukuran 5–15KB tanpa mampatan dan 2–5KB selepas gzip.

# Build production CSS
NODE_ENV=production npx tailwindcss -i input.css -o dist/output.css --minify

# Check uncompressed size
wc -c dist/output.css
# Example output: 12048 dist/output.css (12KB uncompressed)

# Check gzipped size
gzip -c dist/output.css | wc -c
# Example output: 3421 (3.4KB gzipped — excellent)

# If size > 50KB uncompressed, investigate further

Menyemak Liputan Glob Kandungan

Punca paling biasa bagi output Tailwind yang terlalu besar ialah glob kandungan yang terlalu luas dan mengimbas terlalu banyak fail, termasuk pustaka vendor atau fail output yang dijana dan kebetulan mengandungi rentetan yang menyerupai kelas CSS.

Memasukkan node_modules/** atau direktori output yang dikompil secara tidak sengaja boleh menyebabkan JIT menjana ribuan kelas palsu. Semak setiap glob dalam tatasusunan kandungan anda dan pastikan glob tersebut hanya meliputi templat sumber sebenar anda.

// BAD: Too broad — scans node_modules (thousands of spurious classes)
module.exports = {
  content: ['**/*.{html,js}'],  // matches ALL files including node_modules!
};

// GOOD: Scoped to your actual source directories
module.exports = {
  content: [
    './src/**/*.{html,js,ts,tsx}',
    './pages/**/*.{js,ts,tsx}',
    './components/**/*.{js,ts,tsx}',
    // Explicitly include specific external packages if needed:
    './node_modules/@headlessui/react/**/*.{js,ts}',
  ],
};

Mengaudit dengan Laporan PurgeCSS

Anda boleh menggunakan PurgeCSS dalam mod analisis (berasingan daripada imbasan terbina dalam Tailwind) untuk menjana laporan tentang pemilih CSS yang dikekalkan dan yang akan dibuang. Ini membantu mengenal pasti kelas yang tidak dijangka dalam output anda.

Sebagai alternatif, cari corak kelas dalam fail CSS yang dikompil yang tidak sepatutnya berada di situ: jika anda melihat ratusan variasi bg- termasuk warna yang tidak pernah anda gunakan, semak corak senarai dibenarkan anda — corak tersebut mungkin menjana lebih banyak kelas daripada yang dikehendaki.

# Install PurgeCSS CLI
npm install -g purgecss

# Run PurgeCSS on your built CSS
purgecss --css dist/output.css \
         --content './src/**/*.html' \
         --output dist/purged.css \
         --rejected-css dist/rejected.css

# Check rejected.css — classes in this file are in your built CSS
# but not found in your templates.
# If there are many, review your safelist and content configuration.

Mengenal Pasti Pembengkakan Senarai Dibenarkan

Senarai dibenarkan yang besar atau luas ialah sumber biasa pembengkakan himpunan. Setiap corak menjana banyak kelas. Contohnya, /bg-(red|green|blue|yellow|purple|orange|pink|indigo|violet|teal|cyan|rose)-(50|100|200|300|400|500|600|700|800|900|950)/ menjana 132 kelas warna latar belakang sahaja — walaupun anda hanya menggunakan 10 daripadanya.

Audit senarai dibenarkan anda dengan mengira corak dan menganggarkan jumlah kelas yang dijana oleh setiap corak. Buang corak yang ditambahkan secara andaian dan kekalkan hanya corak untuk kes penggunaan kelas dinamik yang diketahui.

// Bloated safelist (generates hundreds of classes)
safelist: [
  { pattern: /bg-(red|green|blue|yellow|purple|orange|pink)-(100|200|300|400|500|600|700|800|900)/ },
  // ^ generates 63 classes
  { pattern: /text-(red|green|blue|yellow|purple|orange|pink)-(100|200|300|400|500|600|700|800|900)/ },
  // ^ another 63
]
// Total: 126+ extra classes from safelist alone

// Optimized safelist (only what's actually used dynamically)
safelist: [
  { pattern: /bg-(red|green|yellow|blue)-(100|500)/ }, // 8 classes
  { pattern: /text-(red|green|yellow|blue)-(700|800)/ }, // 8 classes
]

Membuang Gaya Asas yang Tidak Digunakan

preflight Tailwind (set semula CSS asas) menambah kira-kira 4KB gaya asas. Jika anda menggunakan Tailwind bersama rangka kerja CSS yang mempunyai set semula tersendiri, atau jika anda menggunakan Tailwind secara berperingkat, anda mungkin mahu menyahaktifkan preflight.

Tetapkan corePlugins: { preflight: false } dalam konfigurasi anda untuk membuang set semula tersebut. Ini boleh menjimatkan beberapa KB, khususnya dalam projek yang gaya asasnya bercanggah dengan CSS sedia ada.

// tailwind.config.js — disable preflight
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // OR: disable multiple core plugins to reduce output
  corePlugins: {
    preflight: false,     // Remove reset styles
    container: false,     // Remove .container utility if unused
    float: false,         // Remove float utilities if not used
    clear: false,
    skew: false,          // Remove skew transforms if not used
  },
}

Menyahaktifkan Pemalam Teras yang Tidak Digunakan

Anda boleh menyahdayakan keseluruhan kumpulan utiliti yang tidak pernah digunakan oleh projek anda untuk mengurangkan CSS yang dijana. Contohnya, projek yang tidak menggunakan grid CSS boleh menyahdayakan pemalam grid. Projek yang tidak menggunakan transformasi boleh menyahdayakan rotate, scale, skew dan translate.

Semak templat anda untuk mencari awalan utiliti yang tidak pernah digunakan. Menyahdayakan pemalam teras menghalang semua varian utiliti tersebut daripada dijana, walaupun utiliti itu muncul dalam imbasan kandungan (daripada rentetan templat yang menyerupai nama kelas).

// tailwind.config.js
module.exports = {
  corePlugins: [
    // Whitelist approach: only enable plugins your project uses
    // (Empty array = disable ALL core plugins — not recommended unless you know exactly what you need)
    // Better: use the object form to disable specific ones
  ],
  // Object form: disable only specific plugins
  corePlugins: {
    // If your project doesn't use blur/backdrop-filter at all:
    backdropBlur: false,
    backdropBrightness: false,
    backdropContrast: false,
    backdropGrayscale: false,
    backdropHueRotate: false,
    backdropInvert: false,
    backdropOpacity: false,
    backdropSaturate: false,
    backdropSepia: false,
  },
}

Mendayakan Pemampatan CSS

Selain peminimuman Tailwind sendiri (--minify), konfigurasikan alat binaan anda untuk menggunakan pemampatan CSS tambahan. Vite dan webpack kedua-duanya menyokong peminimuman CSS melalui saluran pemprosesan terbina dalam atau berasaskan pemalam.

Untuk pemampatan maksimum, gabungkan peminimuman CSS dengan pemampatan Brotli pada peringkat pelayan. Brotli menghasilkan pemampatan 15–25% lebih baik berbanding gzip untuk fail CSS, sekali gus mengurangkan muatan berkesan anda dengan lebih lanjut.

// vite.config.js — enable CSS minification
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssMinify: true,  // default in production mode
    cssCodeSplit: true, // split CSS per page in multi-page apps
  },
});

// next.config.js — Next.js minifies CSS automatically in production
// No extra configuration needed

Menggugurkan JavaScript Tidak Digunakan dalam Projek Tailwind

Dalam projek React dan Vue, pengguguran pepohon menghapuskan JavaScript yang tidak digunakan, tetapi ia juga mempengaruhi cara kelas sampai kepada JIT. Jika komponen digugurkan daripada himpunan, rentetan kelasnya mungkin tidak muncul dalam JS terkompil, lalu menyebabkan JIT terlepas daripadanya.

Penyelesaiannya adalah dengan mengkonfigurasikan glob kandungan anda supaya menunjuk kepada fail sumber (sebelum pengguguran pepohon), bukannya output terkompil. JIT hendaklah sentiasa mengimbas fail TypeScript/JavaScript sumber anda, bukan himpunan terkompil.

// tailwind.config.js
module.exports = {
  content: [
    // Source files (correct): JIT sees all possible classes
    './src/**/*.{ts,tsx}',
    './src/**/*.{js,jsx}',

    // Compiled output (wrong): some classes may be missing
    // './dist/**/*.js', // Don't scan compiled output
  ],
}

Menganalisis Saiz Himpunan dari Semasa ke Semasa

Saiz himpunan biasanya meningkat secara beransur-ansur apabila ciri ditambahkan. Sediakan pemeriksaan CI yang mengukur saiz himpunan CSS pada setiap permintaan tarik dan gagal jika saiz itu melebihi ambang. Ini mengesan peluasan senarai selamat yang tidak disengajakan atau penambahan glob yang terlalu luas sebelum perubahan tersebut sampai ke pengeluaran.

Alat seperti bundlesize, size-limit atau skrip bash ringkas yang membandingkan saiz fail boleh disepadukan ke dalam saluran pemprosesan CI anda untuk menguatkuasakan had saiz.

# .github/workflows/css-size-check.yml
# Build CSS and fail if it exceeds 20KB
npx tailwindcss -i input.css -o /tmp/tailwind.css --minify
CSS_SIZE=$(wc -c < /tmp/tailwind.css)
echo "CSS size: ${CSS_SIZE} bytes"
if [ ${CSS_SIZE} -gt 20480 ]; then
  echo "ERROR: CSS bundle exceeds 20KB limit (${CSS_SIZE} bytes)"
  exit 1
fi

Senarai Semak Pengoptimuman Akhir

Sebelum menghantar projek Tailwind ke pengeluaran, lalui senarai semak ini:

NODE_ENV=production ditetapkan semasa binaan
Glob kandungan tidak menyertakan node_modules secara meluas
Corak senarai selamat adalah terhad dan didokumentasikan
Pemalam teras yang tidak digunakan dinyahdayakan dalam konfigurasi
CSS diminimumkan (bendera --minify Tailwind atau alat binaan)
Pemampatan pelayan (gzip atau Brotli) didayakan
Saiz fail CSS berada di bawah sasaran had anda (biasanya 15KB tanpa pemampatan)

# Full production optimization command
NODE_ENV=production npx tailwindcss \
  -i ./src/input.css \
  -o ./dist/tailwind.min.css \
  --minify

# Verify result
echo 'Uncompressed:' $(wc -c < ./dist/tailwind.min.css) 'bytes'
echo 'Gzipped:' $(gzip -c ./dist/tailwind.min.css | wc -c) 'bytes'

Semakan Pantas

Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini anda mempelajari: pengukuran saiz himpunan CSS menggunakan binaan pengeluaran dengan --minify dan wc -c, serta pemeriksaan gzip; penetapan skop glob kandungan untuk menghalang JIT daripada mengimbas node_modules atau direktori output; dan pengauditan senarai selamat bagi memastikan corak adalah terhad dan hanya meliputi kes penggunaan kelas yang benar-benar dinamik. Seterusnya kita akan meneroka nilai arbitrari dan kosnya.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menganalisis dan Mengurangkan Saiz Bundle” percuma?

Ya — teks penuh “Menganalisis dan Mengurangkan Saiz Bundle” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menganalisis dan Mengurangkan Saiz Bundle”?

Ukur saiz keluaran CSS akhir, kenal pasti gaya tidak digunakan yang terlepas, dan laraskan glob kandungan anda untuk kecekapan purge maksimum. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Menganalisis dan Mengurangkan Saiz Bundle” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Cara Enjin JIT Berfungsi
Menyenaraikan Kelas Dinamik dengan Selamat
Menganalisis dan Mengurangkan Saiz Bundle
Nilai Arbitrari dan Kosnya

← Kembali ke Tailwind CSS Academy