Tulis di depan
Baru -baru ini, saya menemukan beberapa pemuatan konten dalam kemasan modular sudut di tempat kerja. Saya merasa bahwa saya memiliki beberapa jebakan di tengah, jadi saya menandainya di sini.
Latar Belakang Proyek:
Proyek ini terutama menggunakan AngularJS sebagai kerangka kerja front-end. Ketika proyek dirilis sebelumnya, semua skrip front-end akan dikemas dan dikompresi ke dalam file. Ini akan dimuat saat halaman pertama kali diakses, menghasilkan pemuatan awal halaman yang lambat. Atas dasar ini, diusulkan untuk memuat sesuai permintaan, yaitu, skrip modul akan dimuat hanya ketika pengguna mengakses modul tertentu.
Peralatan:
Proyek ini menggunakan kemasan Grunt sesuai dengan spesifikasi AMD, menggunakan Rengut-Contrib-Requirejs untuk memompres dan menggabungkan modul, dan menggunakan Oclazyload untuk menyelesaikan pemuatan malas modul sudut.
Proses Proyek:
Kemasan Modul
Kode dalam proyek ini pada dasarnya ditulis sesuai dengan spesifikasi AMD, dan RROW-Contrib-Requirejs digunakan untuk mengompres setiap modul ke dalam file JS.
Pertanyaan 1: Dalam kode proyek, setiap modul akan bergantung pada perpustakaan pihak ketiga/layanan publik dalam instruksi proyek/publik dalam proyek. Jika bagian dari konten ini tidak diproses, Grunt-Contrib-Requirejs akan memuat semua modul yang tergantung pada saat memampatkan setiap modul, dan kemudian mengompresnya ke dalam file JS yang sama.
Tanggapan: Kompres Perpustakaan Pihak Ketiga/Layanan Publik dan Instruksi ke dalam Tiga Modul, dan kemudian menghapusnya menggunakan "Kecualikan" dari skrip kemasan setiap modul. Seperti yang ditunjukkan pada gambar di bawah ini:
Perlu dicatat bahwa nama modul modul publik perlu memiliki file JS dengan nama yang sama di bawah jalur yang sesuai.
Memuat sesuai permintaan
Setelah mengemas skrip ke dalam file JS dengan modul, langkah selanjutnya adalah memuat modul yang berbeda sesuai dengan permintaan pengguna. Proyek ini menggunakan UI-Router untuk menangani lompatan perutean. Anda dapat mulai dari rute untuk menyelesaikan pemuatan malas modul.
Metode spesifiknya adalah: Ketika pengguna mengoperasikan lompatan rute, modul tempat pengguna dimuat sesuai dengan keadaan yang ingin dilompati pengguna. Berdasarkan hal ini, pemetaan antara negara dan modul perlu ditambahkan. Pada awalnya, perlu memuatnya dengan kebutuhan. Ditemukan bahwa skrip dapat dimuat, tetapi pengontrol/layanan/filter yang terdaftar di Angular tidak berfungsi. Investigasi menemukan bahwa layanan seperti pengontrol yang terdaftar oleh Angular setelah memanggil metode bootstrap tidak akan dipanggil lagi. Berdasarkan hal ini, Oclazyload diperkenalkan untuk memuat (Oclazyload memiliki beberapa injeksi dan modifikasi pada kode sumber sudut).
Sejauh ini, pemuatan permintaan pada dasarnya telah diimplementasikan, tetapi masih ada beberapa masalah:
Ketergantungan proyek antar modul
Karena ada ketergantungan yang kuat antara proyek antara beberapa modul, pemrosesannya adalah menambahkan dependensi antara modul dalam file konfigurasi. Sebelum memuat modul, periksa apakah ia memiliki modul dependen. Jika demikian, modul dependen akan dimuat terlebih dahulu. Setelah modul dependen dimuat, modul saat ini akan dimuat.
Pemuatan instruksi yang malas;
Dalam Angular, $ Compile dapat digunakan untuk mengimplementasikan saling ketergantungan antar instruksi. Pemrosesan ini adalah untuk mengonfigurasi nama instruksi dan ketergantungan modul instruksi. Ketika instruksi tertentu digunakan, modul dimuat terlebih dahulu dan kemudian metode kompilasi dijalankan. Solusi ini dapat menyelesaikan sebagian besar dependensi instruksi.
Lokasi instruksi. Sebagian besar proyek menggunakan halaman panjang, setiap halaman panjang dibagi menjadi beberapa area, dan setiap area adalah perintah. Akan ada masalah saat menggunakan intersepsi, yaitu, waktu pemuatan setiap instruksi berbeda. Perintah yang kembali terlebih dahulu akan ditambahkan ke DOM terlebih dahulu, menghasilkan ketidakpastian dalam tata letak halaman. Solusinya adalah dengan menggunakan mekanisme deffer dan setelah semua instruksi dimuat/dikompilasi, tambahkan eksekusi ke pohon DOM.
Ketergantungan Antara Arahan: Ada juga dependensi proyek antar arahan. Solusi untuk ini adalah untuk menggabungkan instruksi yang saling tergantung ke dalam modul dan mengemasnya ke dalam file skrip yang sama. Solusi ini dapat menyelesaikan sebagian besar dependensi instruksi, tetapi tidak dapat menyelesaikan dependensi selama proses inisialisasi. Mungkin ada instruksi tertentu yang disusun, dan ketergantungan pada instruksi belum dikompilasi. Untuk contoh yang sangat istimewa seperti itu, hanya skrip dan templat yang dimuat saat halaman diinisialisasi.
Di atas adalah masalah yang dihadapi selama proses proyek. Pada dasarnya, setiap kali Anda maju, Anda menginjak lubang. Banyak hal adalah pertama kalinya Anda bersentuhan dengan mereka, dan saya merasa bahwa saya telah belajar sesuatu. Solusi untuk banyak masalah mungkin tidak terlalu jelas. Yang lain mengalami semua masalah di atas. Selama Anda menggunakan mesin pencari dengan baik dan membaca/memahami kode orang lain sendiri, semua masalah dapat diselesaikan dengan sukses.
Beberapa jebakan tentang pemuatan malas sudut adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.