Tips Optimasi Kode Di Laravel

Bulan lalu kami mulai mengerjakan salah satu proyek internal kami yang disebut InfyTracker, yang kami rencanakan untuk digunakan sebagai pelacak waktu sederhana dan sangat sedikit manajemen proyek atau pelaporan tugas.

Kami juga telah menerbitkannya sebagai proyek sumber terbuka ke akun Github kami sehingga orang lain dari komunitas dapat menggunakannya. Ini masih dalam tahap alpha dan kami masih mengerjakannya dan membuat banyak perbaikan. Namun, saat membangun proyek ini, kami menemukan beberapa hal yang menurut kami mungkin berguna untuk mengoptimalkan aplikasi atau dapat digunakan di proyek lain. Juga, saya pikir banyak pengembang bahkan tidak menyadari hal ini.

Jadi saya berencana untuk membaginya dengan komunitas di mana saya akan mendiskusikannya secara rinci dengan solusi yang kami gunakan. Jadi inilah hal-hal/kesalahan yang kami temukan selama pengembangan proyek kami.

Menambahkan semua stylesheet dan skrip dalam file tata letak
Tidak memisahkan CSS atau JS level halaman
Tidak menggunakan laravel-mix

1. Menambahkan semua stylesheet dan skrip dalam tata letak

Apa yang saya lihat adalah, ketika kami ingin menambahkan perpustakaan/paket baru ke proyek, orang-orang biasanya pergi ke file tata letak dan hanya memasukkan tag gaya dan skrip di sana.

Misalnya, saya ingin menggunakan momen-js di aplikasi, jadi apa yang saya lakukan, saya pergi ke file tata letak saya dan memasukkan tag skrip momen-js di sana melalui CDN. Bahkan jika saya hanya membutuhkan moment-js di beberapa halaman saya. hal yang sama bisa ada untuk perpustakaan lain seperti tabel data, bahkan jika kita hanya membutuhkan tabel data di beberapa halaman aplikasi.

Masalah yang ditimbulkannya adalah, bahkan jika kita tidak membutuhkannya di sebagian besar halaman kita, file-file itu masih disertakan di halaman kita dan tentu saja, halaman membutuhkan lebih banyak waktu untuk dimuat.

2. Tidak memisahkan CSS atau JS level halaman

Umumnya, kami menggunakan banyak JS dalam kode kami. Dan untuk semua JS/CSS level halaman, sebagian besar pengembang meletakkannya di file blade halaman di bagian bawah dengan beberapa bagian JS/CSS.

Misalnya, saya telah menggunakan datatable di halaman saya, jadi saya perlu menginisialisasi datatable. jadi secara umum, saya akan mendeklarasikan satu bagian yang disebut skrip atau bottom_js yang akan dihasilkan dalam file tata letak saya. Itulah yang saya lihat di banyak kode.

Tapi, ada dua masalah dengan itu,

Saat halaman itu dimuat, kode JS Anda benar-benar terlihat oleh dunia dan terkadang itu tidak baik dan aman
Itu tidak diperkecil (dan karena itu ada di file blade Anda, tidak ada cara untuk mengecilkannya juga)

3. Tidak menggunakan laravel-mix

Dalam beberapa proyek atau sangat sedikit pengembang ahli yang menggunakan laravel-mix atau menggunakan laravel-mix dengan cara yang benar. Saat Anda tidak menggunakan laravel-mix di situs Anda, file JS/CSS Anda tidak diperkecil. Ini benar-benar terlihat oleh dunia yang terkadang berbahaya dan ukuran file juga besar di proyek besar.

Itulah tiga hal utama yang kami temukan saat mengembangkan proyek ini.

Berikut adalah solusi yang kami gunakan untuk mengatasi masalah tersebut.

Solusi 1. Menambahkan semua stylesheet dan skrip di halaman tertentu

Untuk mengatasi masalah ini, kami mendeklarasikan dua bagian dalam file tata letak kami.

lembar gaya
skrip

jadi semua halaman web kami yang memiliki ketergantungan untuk perpustakaan CSS/JS pihak ketiga akan terlihat seperti berikut,

@extends('layouts.app')
@section('stylesheets')
    <link rel="stylesheet" href="https://rawgit.com/fronteed/iCheck/1.x/skins/all.css">
@endsection

@section('content')
    ....content here....
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
@endsection

Sesuai contoh di atas, perpustakaan iCheck hanya akan ditambahkan pada halaman di mana kita benar-benar menggunakan iCheck, bukan semua halaman web saya.

Solusi 2. Memisahkan CSS atau JS level halaman

Untuk mengatasi masalah ini, kami juga mendeklarasikan dua bagian baru di file tata letak.

halaman_css
halaman_js

bagian page_css akan berisi CSS level halaman dan bagian page_js akan berisi javascript level halaman seperti menginisialisasi datatable atau kotak centang dll. Juga, semua CSS dan JS level halaman ini tidak ditempatkan langsung di dalam file blade. Tapi kami melangkah lebih jauh.

Di bawah folder resources/assets, kami memiliki dua folder,

js - berisi semua JS level halaman untuk file blade yang berbeda
gaya - berisi semua CSS level halaman untuk file blade yang berbeda

Kami mencoba mengikuti struktur folder yang sama untuk ini yang kami gunakan untuk tampilan blade kami.

Jika Anda memiliki banyak file maka Anda dapat mencoba menggunakan nama seperti index.js, edit.js, dll, sama seperti nama tampilan blade Anda.

Dan dalam file tampilan blade, Anda dapat menyertakannya sebagai skrip atau lembar gaya. Untuk misalnya

@section('page_js')
    <script src="{{ mix('assets/js/task/task.js') }}"></script>
@endsection

Catatan: Penggunaan campuran dijelaskan di bagian selanjutnya. jadi Anda bisa mengabaikannya mulai sekarang. Tapi ide dasarnya adalah, sertakan mereka sebagai skrip atau stylesheet dengan bagian, alih-alih langsung memasukkannya ke file blade.

Solusi 3. Menggunakan laravel-mix

Campuran Laravel adalah alat yang hebat untuk kompilasi aset. Semua file JS/CSS level halaman dan JS/CSS umum lainnya harus dikompilasi oleh laravel mix dan harus disalin ke folder publik dengan versi untuk penghilang cache. Dan kemudian akan disertakan melalui mix helper dalam tampilan blade kami. (Seperti yang dijelaskan dalam solusi di atas di bagian bawah).

Untuk misalnya webpack.mix.js kami terlihat seperti berikut ini,

/* CSS */
mix.sass('resources/assets/style/sass/laravel/app.scss', 'public/assets/style/css/app.css')
   .sass('resources/assets/style/sass/style.scss', 'public/assets/style/css/style.css')
   .sass('resources/assets/style/sass/dashboard.scss', 'public/assets/style/css/dashboard.css')
   .version();

/* JS */
mix.js('resources/assets/js/custom.js', 'public/assets/js/custom.js')
   .js('resources/assets/js/users/user.js', 'public/assets/js/users
/user.js')
   .js('resources/assets/js/task/task.js', 'public/assets/js/task
/task.js')
   .version();

Ini akan memperkecil kode kita dan membuatnya aman di lingkungan produksi.

Semoga ini dapat membantu.