Laravel Mix menggunakan Purgecss

Pembahasan ini merupakan kelanjutan dari Laravel Mix dengan VueJs dan Laravel Mix menggunakan Tailwindcss. Di kedua pembahasan itu kita sudah mengintegrasikan Tailwindcss pada aplikasi yang dibuat dengan VueJS dan Laravel Mix. Pada pembahasan ini kita akan mengintegrasikan aplikasi tersebut dengan Purgecss.

Baca Juga : Laravel Mix menggunakan Tailwindcss

Purgecss

Purgecss merupakan tool yang membantu dalam menghapus kode CSS yang tidak digunakan. Tool ini sangat berguna ketika kita hanya menggunakan sebagian kode CSS dari Framework CSS yang memiliki banyak kode CSS di dalamnya. Dengan Tool ini dapat menghapus kode CSS tersebut sehingga mengurangi ukuran dari berkas CSS yang berdampak pada loading time di aplikasi.


Purgecss berperan penting saat menggunakan Tailwindcss karena ukuran dari Framework tersebut terbesar dari Framework CSS lainnya, dan mengingat ketika kita jalankan perintah npm production (compile dan minify) di Terminal (Cmd) pada folder aplikasi kita, seperti ini.

$ npm run prod

Maka ukuran berkas "app.css" akan sangat besar dan ada tanda "[big]" di sebelah kanan, seperti yang terlihat di bawah ini.

Untuk mengatasinya kita perlu menggunakan Purgecss yang mendeteksi Kode CSS dari Tailwindcss yang digunakan saja untuk dicompile.

Integrasi Purgecss

Pertama kita install dulu Purgecss untuk Laravel Mix menggunakan Node Package Manager (NPM), ketikan perintah seperti ini.

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

Sekarang pada berkas "webpack.mix.js", kita tambahkan kode menjadi seperti ini.

Globs untuk menentukan berkas yang ingin di deteksi Kode CSSnya, disini diatur semua folder yang ada berkas vuejs di folder src dan berkas "index.html" karena disana kita ada pakai Kode CSS di bagian titlenya.

Terakhir jalankan perintah npm production.

$ npm run prod

Maka ukuran dari Kode CSS di "app.css" menjadi jauh lebih kecil dari sebelumnya.

Sekian dari Laravel Mix menggunakan Purgecss. terimakasih