Optimalisasi aplikasi Angular

Angular adalah kerangka kerja pengembangan aplikasi web satu halaman yang paling populer, meskipun ini tidak berarti bahwa aplikasi Angular hanya dapat berisi satu halaman. Menggunakan kerangka kerja ini, Anda dapat membuat situs yang terdiri dari puluhan halaman. Versi terbaru Angular, berkat upaya tim pengembangan dan komunitas penggemar, dioptimalkan dengan baik. Namun, ketika datang ke aplikasi tertentu, kita tidak boleh melupakan beberapa hal yang mempengaruhi kinerjanya.



Materi, terjemahan yang kami terbitkan hari ini, akan mengungkapkan enam bidang optimasi aplikasi Angular.

1. Pemuatan malas dan optimalisasi bundel utama

Jika lazy loading tidak digunakan saat menyiapkan versi produksi aplikasi, maka kemungkinan besar di folder dist Anda akan melihat file-file berikut.

 polyfills.js scripts.js runtime.js styles.css main.js 

File polyfills.js memungkinkan polyfills.js memastikan aplikasi yang ditulis menggunakan fitur teknologi web terbaru kompatibel dengan berbagai browser.

File script.js berisi skrip yang dijelaskan di bagian scripts dari file angular.json . Berikut adalah contoh sederhana dari bagian tersebut.

 "scripts": [  "myScript.js", ] 

File runtime.js adalah loader Webpack. Ini berisi alat Webpack yang diperlukan untuk mengunduh file lain.

File styles.css berisi gaya yang dideklarasikan di bagian styles dari file angular.json . Ini adalah contoh dari bagian ini.

 "styles": [ "src/styles.css", "src/my-custom.css" ], 

File main.js menyimpan semua kode aplikasi, termasuk komponen (TS, HTML dan kode CSS), jalur pipa, arahan, layanan, dan modul yang diimpor (termasuk modul pihak ketiga).

Ketika aplikasi tumbuh dan main.j ukuran file main.j . Ini dapat berubah menjadi masalah, karena, untuk membentuk halaman, browser, selain menyelesaikan tugas-tugas lain pada visualisasi data, perlu mengunduh dan mengurai file main.js Jika file ini cukup besar, pemrosesannya akan menjadi tugas yang menakutkan tidak hanya untuk seluler, tetapi juga untuk browser desktop.

Cara termudah untuk menyelesaikan masalah ini adalah dengan membagi aplikasi menjadi beberapa modul, yang menggunakan teknik lazy loading. Dengan pendekatan ini, Angular membuat file terpisah untuk setiap modul, yang tidak akan diunduh hingga diperlukan (biasanya ketika mengaktifkan rute tertentu).

Untuk menunjukkan penerapan teknik pemuatan malas, dua komponen dibuat - app.component dan second.component . Keduanya ada di modul app.module , pemuatan malas tidak diterapkan saat bekerja dengan mereka.

Komponen app.component sangat sederhana. Ini menampilkan dua tombol, salah satunya bertanggung jawab untuk beralih ke komponen second.component , dan yang kedua mengarah kembali ke app.component .


Aplikasi Komponen

Templat komponen Second berisi bagian teks yang sangat besar dengan volume sekitar 1 MB.


Komponen kedua

Karena teknik pemuatan malas tidak diterapkan di sini, aplikasi kita akan memiliki file main.js besar yang berisi kode app.component dan second.component .

Jika Anda membuka alat pengembang Chrome dan melihat tab Network, Anda dapat memperkirakan ukuran file main.js Yaitu, itu adalah 1,3 Mb.


Menganalisis ukuran file dengan Alat Pengembang Chrome

Masalahnya di sini adalah bahwa sebagian besar waktu ketika bekerja dengan proyek kami, pengguna akan berada di halaman utamanya, dan bukan di halaman lain, jadi mengunduh semua kode sebagai satu file bukanlah ide yang baik. Kode komponen kedua dapat dikeluarkan dalam modul terpisah, yang akan dimuat hanya jika pengguna pergi ke halaman yang sesuai. Ini berarti pengurangan yang signifikan pada file main.js , yang memberikan pemuatan pertama yang sangat cepat pada halaman utama situs.

Saat menggunakan teknik lazy loading, setelah menyelesaikan proses pembangunan proyek, file seperti 4.386205799sfghe4.js akan dibuat. Di sinilah kode akan disimpan yang tidak akan dimuat saat pertama kali memuat situs. Akibatnya, jika sekarang Anda membuka situs dan menganalisisnya, ternyata ukuran main.js hanya 266 Kb.


Perampingan main.js

File tambahan besar 1 MB diunduh hanya setelah pergi ke halaman yang sesuai.


Unduh file tambahan

Kami menerapkan pemuatan malas, tetapi kami tidak dapat mengatakan bahwa solusi seperti itu sepenuhnya cocok untuk kami. Faktanya adalah bahwa pendekatan ini memperlambat transisi pertama pengguna ke halaman, untuk output yang memerlukan file besar yang terpisah. Untungnya, Angular menyediakan sarana untuk menyelesaikan masalah ini. Yaitu, kita berbicara tentang teknologi PreloadingStrategy .

Menggunakannya, kami dapat menginformasikan kerangka kerja itu, setelah modul utama (file main.js ) dimuat dan diproses, ia main.js di latar belakang modul-modul lainnya. Akibatnya, ketika pengguna pergi ke halaman yang sebelumnya membutuhkan file besar untuk ditampilkan, ternyata file tersebut telah diunduh. Berikut adalah contoh kode yang memuat semua modul.

 import { PreloadAllModules, RouterModule } from '@angular/router'; RouterModule.forRoot( [ {   path: 'second',   loadChildren: './second/second.module#SecondModule' } ], {preloadingStrategy: PreloadAllModules}) 

Menerapkan pemuatan malas saat mengoptimalkan aplikasi Angular, disarankan untuk berusaha memecah proyek menjadi modul sebanyak mungkin. Selain itu, Anda perlu memperhatikan preloading mereka. Ini akan memungkinkan file main.js menjadi kecil, yang berarti memuat lebih cepat dan menampilkan halaman utama proyek.

2. Analisis Bundel Menggunakan Webpack Bundle Analyzer

Jika bahkan setelah membagi logika proyek menjadi banyak modul, ternyata main.js masih terlalu besar (untuk aplikasi kecil dan menengah, penulis materi ini menyarankan agar file tersebut berukuran 1 MB besar), Anda dapat terus mengoptimalkan aplikasi menggunakan Webpack Bundle Analyzer. Paket npm ini memungkinkan Anda untuk memvisualisasikan hasil Webpack dalam struktur pohon yang mendukung pembesaran. Untuk menggunakan Webpack Bundle Analyzer, instal dalam proyek Angular sebagai ketergantungan pengembangan.

 npm install --save-dev webpack-bundle-analyzer 

Kemudian kami memodifikasi bagian script dari file package.json dengan menambahkan teks berikut ke dalamnya.

 "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json" 

Harap dicatat bahwa alamat file dist/stats.json mungkin berbeda di proyek Anda. Misalnya, jika Anda telah menyelesaikan berkas bundel di folder dist/browser , Anda harus menulis ulang baris di atas seperti ini: dist/browser/stats.json .

Sekarang jalankan analisa.

 npm run bundle-report 

Setelah menjalankan perintah ini, perakitan produksi aplikasi akan dihasilkan dan statistik untuk setiap bundel akan ditampilkan. Beginilah hasil dari visualisasi data ini.


Analisis proyek menggunakan Webpack Bundle Analyzer

Sekarang Anda dapat menganalisis komposisi masing-masing bundel. Ini adalah alat yang sangat berguna yang memungkinkan Anda untuk mengidentifikasi dependensi yang dapat Anda lakukan tanpa.

3. Membuat beberapa modul kecil untuk dibagikan

Modul yang berbagi bagian aplikasi yang berbeda berkontribusi pada penerapan prinsip KERING , tetapi kadang-kadang bahkan modul tersebut, saat aplikasi berkembang, menjadi semakin banyak. Sebagai contoh, jika kita memiliki modul SharedModule tertentu yang mengandung banyak modul, komponen, pipa, mengimpor modul app.module ke app.module akan menambah ukuran bundel main.js , karena langkah seperti itu tidak hanya akan mengarah pada impor apa yang dibutuhkan main.js , tetapi juga semua yang ada di SharedModule . Untuk menghindari situasi ini, Anda dapat membuat modul lain, seperti HomeSharedModule , yang dirancang untuk dibagikan oleh modul utama dan komponennya.

Kehadiran dalam proyek beberapa modul yang dimaksudkan untuk berbagi lebih baik daripada kehadiran hanya satu modul tersebut, biasanya memiliki ukuran besar.

4. Menggunakan teknik pemuatan malas untuk gambar yang tidak terlihat di halaman

Ketika Anda pertama kali memuat halaman utama aplikasi, mungkin itu mengandung gambar yang tidak terlihat oleh pengguna (mereka berada di luar area tampilan). Untuk melihatnya, Anda perlu menggulir halaman. Tetapi gambar-gambar yang tidak terlihat ini dimuat saat halaman dimuat. Jika ada banyak dari mereka, ini akan mempengaruhi kecepatan memuat halaman. Untuk mengatasi masalah ini, Anda dapat menerapkan teknik pemuatan malas ke gambar, memuatnya hanya saat pengguna mencapai mereka. Ada satu alat JS yang berguna, Intersection Observer , yang membuatnya mudah untuk mengimplementasikan pemuatan gambar yang malas. Selain itu, untuk digunakan kembali, atas dasar itu Anda dapat membuat arahan yang sesuai. Detail tentang ini dapat ditemukan di sini .

5. Menggunakan pengguliran virtual untuk daftar panjang

Versi ketujuh Angular memiliki kemampuan untuk menggunakan pengguliran virtual . Teknologi ini memuat elemen ke dalam DOM dan menurunkannya berdasarkan seberapa banyak daftar yang terlihat oleh pengguna. Ini sangat mempercepat pekerjaan aplikasi yang menggunakan daftar panjang.


Hanya item daftar yang terlihat yang ditampilkan pada halaman.

6. Menggunakan Strategi FOUT untuk Bekerja dengan Font Alih-alih Strategi FOIT

Banyak situs menggunakan font khusus. Mereka biasanya terlihat sangat menarik, tetapi aplikasi mereka menciptakan beban tambahan pada browser, karena harus mengunduh font-font ini dan menyiapkannya untuk bekerja. Saat menggunakan font yang tidak standar, katakanlah, diunduh dari layanan pihak ketiga seperti Google Font, dua skenario berikut ini dimungkinkan:

1. Peramban mengunduh font, memprosesnya, dan hanya kemudian menampilkan teks. Sampai font siap digunakan, teks yang diketik dalam font ini tidak akan terlihat. Ini disebut FOIT (Flash teks tidak terlihat).
2. Browser awalnya menampilkan teks menggunakan font standar, sambil memuat font eksternal. Ketika font ini siap digunakan, font standar berubah menjadi font khusus ini. Hasilnya, ternyata teks pada halaman akan ditampilkan dalam font standar sampai font khusus dimuat, setelah itu teks akan ditampilkan lagi, tetapi dengan font baru. Ini disebut FOUT (Flash teks tanpa gaya).

Sebagian besar browser menggunakan font non-standar menggunakan strategi FOIT, strategi FOUT hanya digunakan di Internet Explorer. Untuk menggunakan FOUT alih-alih FOIT, Anda dapat menggunakan deskriptor font-display untuk @font-face , dan beri tahu browser apakah kita ingin teks ditampilkan dalam font standar terlebih dahulu, lalu milik kita, atau kita akan puas dengan periode tembus teks teks tertentu. . Jika Anda tertarik pada subjek font - lihat materi ini . Secara khusus, di sini Anda dapat menemukan informasi tentang fitur font dan rekomendasi mengenai pilihan strategi FOIT atau FOUT.

Ringkasan

Di sini kami melihat beberapa teknik untuk mengoptimalkan aplikasi Angular. Padahal, masih banyak lagi. Secara khusus, kita berbicara tentang rendering server, penggunaan pekerja layanan, dan halaman AMP. Kelayakan optimasi dan pilihan metodenya tergantung pada proyek tertentu - pada fitur dan tujuannya.

Pembaca yang budiman! Pendekatan apa yang Anda gunakan untuk mengoptimalkan aplikasi Angular?