Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Melihat Kecepatan React Front-End mu menggunakan Aplikasi Lazy Loading

by
Difficulty:AdvancedLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Nur Muhammad Jazuli (you can also view the original English article)

Tantangan dari Front-End developers adalah performa aplikasi. Bagaimana kita dapat menyampaikan sebuah kekuatan dan fitur lengkap aplikasi kepada user tanpa harus memaksa mereka menunggu loading halaman Teknik yang digunakan untuk meningkatkan kecepatan website sangat banyak sekali dan itu dapat membuat bingung dimana cara yang paling tepat untuk mengoptimisasi performa dan kecepatan.

Untungnya, Solusinya tidak terlalu rumit seperti yang terlihat. Di postingan kali ini saya akan menjelaskan salah satu cara efektif yang dipakai oleh aplikasi web berskala besar untuk melihat kecepatan dan pengalaman pengguna. Saya akan memeriksa 1 paket fasilitas dan memastikan kita dapat mengirimkan aplikasi kita kepada user dengan cepat tanpa harus mereka memperhatikan sesuatu yang telah berubah.

Apa artinya sebuah website menjadi Cepat?

Pertanyaan tentang performa web sangat dalam dan luas. Demi untuk pos ini saya akan mencoba mendefinisikan performa secara bahasa sederhana: kirimkan sesedikit mungkin secepat yang Anda bisa. Tentunya, ini mungkin sangat menyederhanakan masalah, tetapi secara praktis, kita dapat mencapai peningkatan kecepatan yang dramatis dengan hanya mengirim lebih sedikit data bagi pengguna untuk mengunduh dan mengirim data dengan cepat.

Untuk tujuan posting ini, saya akan fokus pada bagian pertama dari definisi ini — mengirimkan jumlah informasi yang paling sedikit ke peramban pengguna.

Selalu, masalah terbesar ketika datang untuk memperlambat aplikasi kami adalah gambar dan JavaScript. Dalam posting ini saya akan menunjukkan kepada Anda bagaimana menangani masalah kumpulan aplikasi besar dan mempercepat situs web kami dalam prosesnya.

React Loadable

React Loadable adalah paket yang memungkinkan kita untuk memuat JavaScript kita hanya ketika diperlukan oleh aplikasi. Tentu saja, tidak semua situs web menggunakan react, tetapi demi keringkasan saya akan fokus pada penerapan React Loadable di sisi server yang menggunakan webpack. Hasil akhirnya adalah beberapa file JavaScript yang dikirimkan ke browser pengguna secara otomatis ketika kode itu diperlukan.

Menggunakan definisi kami dari sebelumnya, yang artinya kita mengirim lebih sedikit ke pengguna di muka sehingga data dapat diunduh lebih cepat dan pengguna kita akan merasakan situs yang lebih berkinerja.

1. Tambahkan React Loadable ke Komponen Anda

Saya akan mengambil contoh komponen React, MyComponent. Saya berasumsi komponen ini terdiri dari dua file, MyComponent / MyComponent.jsx dan MyComponent / index.js.

Dalam dua file ini saya mendefinisikan komponen React persis seperti yang biasanya saya lakukan di MyComponent.jsx. Di index.js, saya mengimpor komponen react dan mengekspornya kembali — kali ini dibungkus dalam fungsi Loadable. Dengan menggunakan fitur impor ECMAScript, saya dapat menunjukkan kepada Webpack bahwa saya berharap file ini dimuat secara dinamis. Pola ini memungkinkan saya untuk dengan mudah memuat komponen apa pun yang sudah saya tulis. Ini juga memungkinkan saya untuk memisahkan logika antara pemuatan-lambat dan rendering. Mungkin terdengar rumit, tetapi inilah yang akan terlihat dalam praktik:

Saya kemudian dapat mengimpor komponen saya persis seperti biasanya:

Saya telah memperkenalkan React Loadable ke MyComponent. Saya dapat menambahkan lebih banyak logika ke komponen ini nanti jika saya memilih - ini mungkin termasuk memperkenalkan paket pemuatan atau pengendali kesalahan ke komponen. Berkat Webpack, ketika kita menjalankan build kita, saya sekarang akan diberikan dengan dua paket JavaScript terpisah: app.min.js adalah bundel aplikasi reguler kami dan myComponent.min.js berisi kode yang baru saja kami tulis. Saya akan membahas cara mengirimkan bundel ini ke browser beberapa saat kemudian.

Sederhanakan pengaturan dengan Babel

Biasanya, saya harus menyertakan dua opsi tambahan saat mengirimkan objek ke fungsi Loadable, modul dan webpack. Ini membantu Webpack mengidentifikasi modul mana yang harus kita masukkan. Untungnya, kita dapat meniadakan kebutuhan untuk memasukkan dua opsi ini dengan setiap komponen dengan menggunakan plugin react-loadable / babel. Ini secara otomatis menyertakan opsi-opsi ini untuk kami:

Saya dapat menyertakan plugin ini dengan menambahkannya ke daftar plugin saya di file .babelrc saya, seperti:

Saya sekarang selangkah lebih dekat untuk lambat-pemuatan komponen kita. Namun, dalam kasus saya, saya berurusan dengan rendering sisi server. Saat ini, server tidak akan dapat membuat komponen kita yang bermuatan-lambat.

3. Rendering Components pada Server

Di aplikasi server saya, saya memiliki konfigurasi standar yang terlihat seperti ini:

Langkah pertama adalah menginstruksikan React Loadable yang saya inginkan agar semua modul di-preload. Ini memungkinkan saya untuk memutuskan mana yang harus dimuat langsung pada klien. Saya melakukan ini dengan memodifikasi file server / index.js saya seperti ini:

Langkah selanjutnya adalah mendorong semua komponen yang ingin saya render menjadi larik sehingga nantinya kami dapat menentukan komponen mana yang memerlukan pemuatan segera. Ini agar HTML dapat dikembalikan dengan bundel JavaScript yang benar termasuk melalui tag skrip (lebih lanjut tentang ini nanti). Untuk saat ini, saya akan memodifikasi file server saya seperti ini:

Setiap kali komponen digunakan yang membutuhkan React Loadable, komponen itu akan ditambahkan ke array modules. Ini adalah proses otomatis yang dilakukan oleh React Loadable, jadi ini semua yang diperlukan pada bagian kami untuk proses ini.

Sekarang kami memiliki daftar modul yang kami tahu perlu segera diberikan. Masalah yang sekarang kita hadapi adalah memetakan modul-modul ini ke bundel yang telah diproduksi secara otomatis oleh Webpack.

4. Memetakan Paket Webpack ke Modul

Jadi sekarang saya telah menginstruksikan Webpack untuk membuat myComponent.min.js dan saya tahu bahwa MyComponent sedang digunakan dengan segera, jadi saya perlu memuat bundel ini dalam payload HTML awal yang kami berikan kepada pengguna. Untungnya, React Loadable menyediakan cara bagi kita untuk mencapai ini juga. Di file konfigurasi Webpack klien saya, saya perlu menyertakan plugin baru:

File loadable-manifest.json akan memberikan saya pemetaan antara modul dan bundel sehingga saya dapat menggunakan modules array yang saya atur sebelumnya untuk memuat bundel yang saya tahu saya perlukan. Dalam kasus saya file ini mungkin terlihat seperti ini:

Ini juga akan membutuhkan file manifes Webpack umum untuk menyertakan pemetaan antara modul dan file untuk keperluan Webpack internal. Saya bisa melakukan ini dengan memasukkan plugin Webpack lain:

5. Menyertakan bundle kedalam HTML mu

Langkah terakhir dalam memuat bundel dinamis kami di server adalah memasukkannya ke dalam HTML yang kita berikan kepada pengguna. Untuk langkah ini saya akan menggabungkan keluaran langkah 3 dan 4. Saya bisa mulai dengan memodifikasi file server yang saya buat di atas:

Dalam hal ini saya telah mengimpor manifes dan meminta React Loadable untuk membuat larik dengan pemetaan modul / bundel. Satu-satunya hal yang tersisa untuk saya lakukan adalah membuat bundel ini menjadi string HTML:

6. Muat Kumpulan Server-Rendered pada Klien

Langkah terakhir untuk menggunakan bundel yang telah kami muat di server adalah dengan mengkonsumsinya pada klien. Melakukan hal ini sederhana — Saya dapat menginstruksikan React Loadable untuk melakukan pramuat modul apa pun yang ditemukan akan segera tersedia:

Kesimpulan

Setelah proses ini, saya dapat membagi bundel aplikasi saya ke dalam banyak bundel yang lebih kecil yang saya butuhkan. Dengan cara ini, aplikasi saya mengirimkan lebih sedikit kepada pengguna dan hanya ketika mereka membutuhkannya. Saya telah mengurangi jumlah kode yang perlu dikirim sehingga dapat dikirim lebih cepat. Ini dapat memiliki peningkatan kinerja yang signifikan untuk aplikasi yang lebih besar. Ini juga dapat mengatur aplikasi yang lebih kecil untuk pertumbuhan yang cepat jika diperlukan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.