Cara menggunakan nuxt menghapus css yang tidak terpakai

Semua pujian diberikan kepada Luca Spezzano atas dedikasi dan pekerjaannya yang luar biasa dengan menulis artikel ini. Beri dia tepuk tangan untuk artikel mediumnya di sini. )

Saya sudah cukup lama mencari alat yang memungkinkan saya membersihkan CSS untuk gaya yang tidak terpakai

Ada alasan khusus mengapa saya mencari alat seperti ini. Alasannya adalah saat ini hampir setiap pengembang menggunakan banyak kerangka kerja dan pustaka CSS untuk mengembangkan antarmuka lebih cepat dan lebih mudah - yang membuat ukuran file CSS bertambah banyak.  

Tapi pernahkah Anda benar-benar memikirkan berapa banyak gaya CSS yang Anda impor dari kerangka kerja yang sebenarnya Anda gunakan? . Jadi mengapa semua gaya yang tidak terpakai ini harus menjadi bagian dari kode Anda?

Purgecss

Di sinilah Purgecss datang untuk membantu

Ini adalah alat yang membantu Anda menghapus CSS yang tidak terpakai dan dapat digunakan sebagai bagian dari alur kerja pengembangan Anda

Inilah cara Purgecss bekerja di bawah layar – perlu diketahui hal-hal berikut

1. File CSS yang ingin Anda bersihkan
2. File-file yang perlu diperiksa
3. Jalur tujuan dari file baru yang dibuat

Jadi, dari file CSS awal (1) ia akan mencari di file HTML Anda (2), dan dari sana membuat file CSS baru (3) hanya dengan gaya yang benar-benar Anda gunakan

Sederhana seperti itu

Saya cukup yakin jika Anda mencobanya, Anda akan dapat mengurangi file hingga 60%

Alat pembangun

Hal menakjubkan tentang Purgecss adalah Anda dapat mengimplementasikannya dalam alur kerja pengembangan dengan banyak alat build populer, seperti

• CLI
• API JavaScript
• Webpack
• Meneguk
• Gulung

Selain itu, Anda juga dapat menggunakannya dengan framework JavaScript paling modern, seperti

• Reaksi
• Melihat
• Lanjut
• Nuxt

Cara menggunakan Purgecss

Ada seluruh artikel tentang cara menyiapkan proses pembuatan CSS menggunakan Gulp

Di bawah ini kami akan menunjukkan cara mengimplementasikan Purgecss dengan Gulp dan Nuxt. js, tetapi Anda dapat membaca dokumentasi resmi di sini untuk mengetahui cara mengaturnya dengan berbagai cara

Awalnya, Anda perlu menginstal paket dengan npm atau benang

npm i -D gulp-purgecss

atau

yarn add gulp-purgecss

Setelah itu, di gulpfile. js Anda perlu mengimpor paket yang baru saja Anda tambahkan

const gulp = require('gulp'),
      purgecss = require('gulp-purgecss');

dan setelah itu, Anda hanya perlu membuat tugas Anda seperti itu

gulp.task('purgecss', () => {
  return gulp
    .src('src/**/*.css')
    .pipe( 
      purgecss({
        content: ['src/**/*.html']
      })
    )
    .pipe(gulp.dest('build/'))
})

hal. jika Anda menjalankan tugas secara seri atau berurutan, ingatlah untuk menjalankan tugas ini setelah Anda membuat file HTML. Jika tidak, tugas akan menghasilkan kesalahan

Pada awalnya, ketika saya melihat Purgecss bekerja dengan file HTML, saya kecewa karena dalam beberapa bulan terakhir saya mengembangkan berbagai proyek dengan Nuxt. js dan bagi saya, sangat penting untuk mengoptimalkan file saya. Tetapi mempelajari dokumentasi saya menemukan bahwa Anda dapat menjalankan Purgecss dengan kerangka kerja JS paling modern seperti React, Vue, Next, dan Nuxt

Pada awalnya, Anda perlu menginstal paket-paket berikut ke proyek Anda dengan npm atau benang

npm i --save-dev glob-all purgecss-webpack-plugin

atau

yarn add glob-all purgecss-webpack-plugin

Sekarang di nuxt Anda. config. js Anda perlu mengimpornya (di luar standar ekspor)

import PurgecssPlugin from 'purgecss-webpack-plugin'
import glob from 'glob-all'
import path from 'path'

Di dalam default ekspor Anda, Anda perlu menambahkan ini di konfigurasi build Anda

build: {
  extractCSS: true,
  extend(config, { isDev, isClient }) {
    if (!isDev && isClient) {
      config.plugins.push(
        new PurgecssPlugin({
          paths: glob.sync([
            path.join(__dirname, './pages/**/*.vue'),
            path.join(__dirname, './layouts/**/*.vue'),
            path.join(__dirname, './components/**/*.vue')
          ]),
          whitelist: ['html', 'body']
        })
      )
    }
  }
}

Dan itu selesai. Ini semua yang perlu Anda lakukan untuk mengetahui cara menghapus CSS yang tidak digunakan

Jika Anda mengetahui cara lain yang lebih baik, jangan ragu untuk menghubungi kami dan mari kita bicarakan

Alicia Newman

Alicia memimpin strategi konten untuk LearnWorthy mengelola tim produser konten, ahli strategi, dan copywriter. Dia secara kreatif mengawasi program konten, kampanye kesadaran, laporan penelitian, dan proyek pemasaran terintegrasi lainnya