Laravel dengan PurgeCSS

Laravel with PurgeCSS

PurgeCSS adalah alat yang sangat berguna untuk mengoptimalkan ukuran file CSS dengan menghapus aturan-aturan yang tidak digunakan dalam proyek Anda. Menggabungkannya dengan Laravel, Anda dapat secara signifikan mengurangi ukuran file CSS yang dikirimkan ke browser, terutama ketika Anda menggunakan framework CSS seperti Bootstrap atau Tailwind.

Berikut adalah langkah-langkah untuk memulai Laravel dengan PurgeCSS:

1. Persiapan Proyek Laravel
   Jika Anda belum memiliki proyek Laravel, Anda bisa membuat proyek baru dengan perintah berikut:
   

   composer create-project --prefer-dist laravel/laravel nama-proyek-anda

2. Instalasi Laravel Mix
   Laravel Mix adalah wrapper untuk Webpack yang memungkinkan Anda mengelola aset seperti CSS dan JavaScript dengan mudah dalam proyek Laravel. Laravel Mix sudah terpasang secara default dalam proyek Laravel.
   Jika Laravel Mix belum terpasang, instal dengan perintah berikut:
   

   npm install

3. Instalasi PurgeCSS
   PurgeCSS dapat digunakan dengan Laravel Mix melalui plugin laravel-mix-purgecss. Untuk menginstalnya, jalankan perintah berikut:
   

   npm install laravel-mix-purgecss --save-dev

4. Konfigurasi Laravel Mix dengan PurgeCSS
   Buka file `webpack.mix.js` di root proyek Laravel Anda, dan modifikasi seperti berikut:
   

   let mix = require('laravel-mix');
   require('laravel-mix-purgecss');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css')
      .purgeCss({
          // Konfigurasi PurgeCSS
          enabled: mix.inProduction(),
          content: [
              './resources/views/**/*.blade.php',
              './resources/js/**/*.vue',
              './resources/js/**/*.js'
          ],
          defaultExtractor: content => content.match(/[\w-/:]+(?

   
   Penjelasan Konfigurasi:
   • `mix.js()` dan `mix.sass()`: Membangun file JavaScript dan SCSS ke dalam folder public.
   • `purgeCss()`: Mengaktifkan PurgeCSS dalam mode produksi untuk menghapus CSS yang tidak digunakan.
   • `content`: Menentukan file sumber yang akan dipindai oleh PurgeCSS untuk mencari CSS yang digunakan (contohnya file Blade, Vue, dan JS).
   • `defaultExtractor`: Digunakan oleh PurgeCSS untuk mengekstrak kelas CSS yang digunakan dalam file.
5. Buat SCSS atau CSS Custom
   Jika Anda menggunakan Tailwind CSS atau membuat CSS custom, tambahkan kode berikut di `resources/sass/app.scss`:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   /* Tambahkan SCSS atau CSS kustom Anda di sini */

6. Membangun Proyek

   Untuk membangun proyek dengan Laravel Mix dan PurgeCSS, jalankan perintah berikut:

   Untuk mode development (tanpa PurgeCSS):

   npm run dev

   Untuk mode production (dengan PurgeCSS):

   npm run production

   Dalam mode produksi, PurgeCSS akan diaktifkan dan akan membersihkan semua CSS yang tidak digunakan, sehingga mengurangi ukuran file CSS secara signifikan.

7. Memverifikasi dan Mengoptimalkan

   Setelah membangun proyek, periksa file public/css/app.css untuk memastikan bahwa ukuran file telah berkurang dan hanya mengandung CSS yang digunakan.

   Anda juga dapat menggunakan alat seperti PurgeCSS Analyzer untuk memeriksa dan memverifikasi aturan CSS mana yang telah dibuang.

8. Testing dan Deployment

   Setelah memastikan semuanya bekerja dengan baik, Anda bisa melanjutkan dengan deployment proyek Anda ke lingkungan produksi.

   Dengan menggunakan PurgeCSS bersama Laravel Mix, Anda akan mendapatkan file CSS yang lebih ramping dan cepat dimuat, yang pada akhirnya akan meningkatkan performa situs web Anda.