Lazy Loading ในเชิงมุม (นำไปใช้กับเว็บไซต์ของคุณ)

Angular เป็นเฟรมเวิร์ก JavaScript ส่วนหน้าที่พัฒนาโดย Google สำหรับสร้างเว็บแอปพลิเคชันระดับองค์กรที่ปรับขนาดได้ แอปพลิเคชันเหล่านี้บางตัวอาจมีขนาดค่อนข้างใหญ่ ส่งผลต่อเวลาในการโหลดแอปพลิเคชันของคุณ

เพื่อลดเวลาในการโหลดและปรับปรุงประสบการณ์โดยรวมของผู้ใช้ คุณสามารถใช้เทคนิคที่เรียกว่าการโหลดแบบขี้เกียจ คุณสมบัติเชิงมุมแบบเนทีฟนี้ช่วยให้คุณโหลดเฉพาะบิตที่จำเป็นของเว็บแอปก่อน แล้วจึงโหลดโมดูลอื่นๆ ตามต้องการ

ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับการโหลดแบบ Lazy Loading และการโหลดแบบ Lazy Loading ช่วยเพิ่มความเร็วเว็บแอปของคุณได้อย่างไร

Lazy Loading คืออะไร?

การโหลดแบบขี้เกียจหมายถึงเทคนิคการโหลดองค์ประกอบของหน้าเว็บเมื่อจำเป็นเท่านั้น คู่ของมัน กระตือรือร้นที่จะโหลด เมื่อทุกอย่างโหลด — หรือพยายามโหลด — ทันที การดึงรูปภาพ วิดีโอ CSS และโค้ด JavaScript ทั้งหมดอย่างกระตือรือร้นอาจทำให้โหลดนาน — ข่าวร้ายสำหรับผู้ใช้

การโหลดแบบ Lazy Loading มักใช้กับรูปภาพและวิดีโอบนไซต์ที่มีเนื้อหาจำนวนมาก แทนที่จะโหลดสื่อทั้งหมดในคราวเดียว ซึ่งจะใช้แบนด์วิธจำนวนมากและทำให้จำนวนการดูหน้าเว็บลดลง องค์ประกอบเหล่านั้นจะถูกโหลดเมื่อตำแหน่งบนหน้ากำลังจะเลื่อนเข้ามาดู

Angular เป็นเฟรมเวิร์กแอปพลิเคชันหน้าเดียวที่ใช้ JavaScript ในการทำงานส่วนใหญ่ คอลเลคชัน JavaScript ของแอปของคุณอาจมีขนาดใหญ่ขึ้นได้อย่างง่ายดายเมื่อแอปเติบโตขึ้น ซึ่งมาพร้อมกับการใช้ข้อมูลและเวลาในการโหลดที่เพิ่มขึ้นตามไปด้วย หากต้องการเร่งความเร็ว คุณสามารถใช้การโหลดแบบขี้เกียจเพื่อดึงข้อมูลโมดูลที่ต้องการก่อน และเลื่อนการโหลดโมดูลอื่นๆ ออกไปจนกว่าจะจำเป็น

ประโยชน์ของ Lazy Loading ในเชิงมุม

การโหลดแบบ Lazy Loading ให้ประโยชน์ที่จะทำให้ไซต์ของคุณเป็นมิตรกับผู้ใช้มากขึ้น เหล่านี้รวมถึง:

• โหลดเร็วขึ้น: JavaScript มีคำแนะนำสำหรับการแสดงเพจของคุณและโหลดข้อมูล ด้วยเหตุนี้ จึงเป็น ทรัพยากรที่บล็อกการ เรนเดอร์ ซึ่งหมายความว่าเบราว์เซอร์ต้องรอโหลด JavaScript ทั้งหมดก่อนที่จะแสดงผลหน้าเว็บของคุณ เมื่อขี้เกียจโหลดใน Angular JavaScript จะถูกแบ่งออกเป็นอันที่โหลดแยกกัน อันเริ่มต้นมีเฉพาะลอจิกที่จำเป็นสำหรับโมดูลหลักของหน้า มันถูกโหลดอย่างกระตือรือร้น จากนั้นโมดูลที่เหลือจะถูกโหลดอย่างเกียจคร้าน การลดขนาดของอันแรกจะทำให้ไซต์โหลดและแสดงผลเร็วขึ้น
• การใช้ข้อมูลน้อยลง: การแบ่งข้อมูลออกเป็นส่วนๆ และโหลดตามต้องการ คุณอาจใช้แบนด์วิธน้อยลง
• ทรัพยากรของเบราว์เซอร์ที่สงวนไว้: เนื่องจากเบราว์เซอร์โหลดเฉพาะส่วนที่จำเป็น จึงไม่เปลืองหน่วยความจำและ CPU ที่พยายามตีความและเรนเดอร์โค้ดที่ไม่จำเป็น

การใช้ Lazy Loading ในเชิงมุม

ในการปฏิบัติตามบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ติดตั้ง NodeJS แล้ว
• ความรู้พื้นฐานของเชิงมุม

ก้าวขึ้นโครงการของคุณ

คุณจะใช้ Angular CLI เพื่อสร้างโครงการของคุณ คุณสามารถติดตั้ง CLI โดยใช้ npm โดยรันคำสั่ง:

npm install -g @angular/cli

หลังจากนั้นให้สร้างโครงการชื่อ Lazy Loading Demo ดังนี้

ng new lazy-loading-demo --routing

คำสั่งนั้นสร้างโครงการเชิงมุมใหม่พร้อมการกำหนดเส้นทาง คุณจะทำงานเฉพาะในโฟลเดอร์ src/app ซึ่งมีรหัสสำหรับแอปของคุณ โฟลเดอร์นี้มีไฟล์การกำหนดเส้นทางหลักของคุณ app-routing.module.ts โครงสร้างของโฟลเดอร์ควรมีลักษณะดังนี้:

สร้างโมดูลคุณลักษณะด้วยเส้นทาง

ต่อไป คุณจะสร้างโมดูลคุณลักษณะที่จะโหลดอย่างเกียจคร้าน หากต้องการสร้างโมดูลนี้ ให้รันคำสั่งนี้:

ng generate module blog --route blog --module app.module

คำสั่งนี้สร้างโมดูลชื่อ BlogModule พร้อมกับการกำหนดเส้นทาง หากคุณเปิด src /app/app-routing.module.ts คุณจะเห็นว่าตอนนี้มีลักษณะดังนี้:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

ส่วนที่สำคัญสำหรับการโหลดแบบขี้เกียจคือบรรทัดที่สาม:

 const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];

เส้นนั้นกำหนดเส้นทาง เส้นทางสำหรับบล็อกใช้อาร์กิวเมนต์ loadChildren แทน component อาร์กิวเมนต์ loadChildren บอก Angular ให้โหลดเส้นทางแบบสันหลังยาว — เพื่อนำเข้าโมดูลแบบไดนามิกเฉพาะเมื่อมีการเยี่ยมชมเส้นทาง จากนั้นส่งคืนไปยังเราเตอร์ โมดูลกำหนดเส้นทางลูกของตัวเอง เช่น blog/** ในไฟล์ routing.module.ts โมดูลบล็อกที่คุณสร้างมีลักษณะดังนี้:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BlogComponent } from './blog.component'; const routes: Routes = [{ path: '', component: BlogComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BlogRoutingModule { }

โปรดทราบว่าไฟล์การกำหนดเส้นทางนี้มีเส้นทางเดียว '' สิ่งนี้แก้ไขสำหรับ /blog และชี้ไปที่ BlogComponent คุณสามารถเพิ่มส่วนประกอบและกำหนดเส้นทางเหล่านั้นในไฟล์นี้ได้

ตัวอย่างเช่น หากคุณต้องการเพิ่มส่วนประกอบที่จะดึงรายละเอียดเกี่ยวกับบล็อกโพสต์ คุณสามารถสร้างส่วนประกอบด้วยคำสั่งนี้:

ng generate component blog/detail

ที่สร้างส่วนประกอบสำหรับรายละเอียดบล็อกและเพิ่มลงในโมดูลบล็อก ในการเพิ่มเส้นทาง คุณสามารถเพิ่มไปยังอาร์เรย์เส้นทางของคุณ:

 const routes: Routes = [{ path: '', component: BlogComponent }, {path:"/:title",component: DetailComponent}];

สิ่งนี้จะเพิ่มเส้นทางที่แก้ไขสำหรับ blog/:title (เช่น blog/angular-tutorial ) อาร์เรย์ของเส้นทางนี้โหลดแบบ Lazy Loaded และไม่รวมอยู่ในบันเดิลเริ่มต้น

ตรวจสอบการโหลดแบบขี้เกียจ

คุณสามารถตรวจสอบได้ว่าการโหลดแบบ Lazy Loading ทำงานโดยเรียกใช้ ng serve และสังเกตผลลัพธ์ ที่ด้านล่างของผลลัพธ์ คุณควรได้รับสิ่งนี้:

ผลลัพธ์ด้านบนแบ่งออกเป็นสองส่วน: Initial Chunk Files คือไฟล์ที่โหลดเมื่อโหลดเพจครั้งแรก Lazy Chunk Files โหลดแบบสันหลังยาว โมดูลบล็อกแสดงอยู่ในตัวอย่างนี้

ตรวจสอบ Lazy Loading ผ่านบันทึกเครือข่ายของเบราว์เซอร์

อีกวิธีในการยืนยันการโหลดแบบ Lazy Loading คือการใช้แท็บ เครือข่าย ในแผงเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ (บน Windows นั่นคือ F12 ใน Chrome และ Microsoft Edge และ Ctrl – Shift – I ใน Firefox สำหรับ Mac นั่นคือ Command – Option – I ใน Chrome, Firefox และ Safari)

เลือกตัวกรอง JS เพื่อดูเฉพาะไฟล์ JavaScript ที่โหลดผ่านเครือข่าย หลังจากโหลดแอปครั้งแรก คุณควรได้รับสิ่งนี้:

เมื่อคุณไปที่ /blog คุณจะสังเกตเห็นอันใหม่ src_app_blog_blog_module_ts.js ถูกโหลด ซึ่งหมายความว่าโมดูลของคุณได้รับการร้องขอเมื่อคุณนำทางไปยังเส้นทางนั้นเท่านั้น และกำลังโหลดโมดูลอย่างเกียจคร้าน บันทึกเครือข่ายควรมีลักษณะดังนี้:

การโหลดแบบขี้เกียจ vs การโหลดแบบกระตือรือร้น

สำหรับการเปรียบเทียบ ลองสร้างโมดูลที่โหลดอย่างกระตือรือร้นและดูว่ามันส่งผลต่อขนาดไฟล์และเวลาในการโหลดอย่างไร เพื่อสาธิตสิ่งนี้ คุณจะต้องสร้างโมดูลสำหรับการพิสูจน์ตัวตน โมดูลดังกล่าวอาจต้องโหลดอย่างใจจดใจจ่อ เนื่องจากการตรวจสอบสิทธิ์เป็นสิ่งที่คุณอาจต้องให้ผู้ใช้ทุกคนทำ

สร้าง AuthModule โดยเรียกใช้คำสั่งนี้ใน CLI:

ng generate module auth --routing --module app.module

ที่สร้างโมดูลและไฟล์กำหนดเส้นทาง นอกจากนี้ยังเพิ่มโมดูลไปยังไฟล์ app.module.ts อย่างไรก็ตาม ไม่เหมือนกับคำสั่งที่เราใช้สร้างโมดูลในครั้งที่แล้ว คำสั่งนี้ไม่ได้เพิ่มเส้นทางที่โหลดแบบขี้เกียจ ใช้พารามิเตอร์ --routing แทน --route <name> ที่เพิ่มโมดูลการรับรองความถูกต้องไปยังอาร์เรย์ imports ใน app.module.ts :

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AuthModule //added auth module ], providers: [], bootstrap: [AppComponent] })

การเพิ่ม AuthModule ให้กับอาร์เรย์นำเข้า AppModule หมายความว่าโมดูลการตรวจสอบสิทธิ์ถูกเพิ่มไปยังไฟล์ก้อนเริ่มต้น และจะรวมอยู่ในบันเดิล JavaScript หลัก เพื่อตรวจสอบสิ่งนี้ คุณสามารถเรียกใช้ ng serve อีกครั้งและสังเกตผลลัพธ์:

อย่างที่คุณเห็น โมดูลการรับรองความถูกต้องไม่ได้รวมเป็นส่วนหนึ่งของไฟล์ Lazy chunk นอกจากนี้ ขนาดของบันเดิลเริ่มต้นยังเพิ่มขึ้นอีกด้วย ไฟล์ main.js มีขนาดเพิ่มขึ้นเกือบสองเท่า โดยเพิ่มจาก 8 KB เป็น 15 KB ในตัวอย่างนี้ การเพิ่มขึ้นเพียงเล็กน้อย เนื่องจากส่วนประกอบไม่มีโค้ดมากนัก แต่เมื่อคุณเติมองค์ประกอบด้วยตรรกะ ขนาดไฟล์นี้จะเพิ่มขึ้น ทำให้เป็นกรณีที่ดีสำหรับการโหลดแบบขี้เกียจ

สรุป

คุณได้เรียนรู้วิธีใช้การโหลดแบบขี้เกียจใน Angular เพื่อดึงโมดูลเมื่อจำเป็นเท่านั้น การโหลดแบบขี้เกียจเป็นเทคนิคที่ยอดเยี่ยมในการปรับปรุงเวลาในการโหลด ลดการใช้ข้อมูล และใช้ทรัพยากรส่วนหน้าและส่วนหลังของคุณได้ดีขึ้น

การโหลดแบบ Lazy Loading พร้อมด้วยเทคโนโลยี เช่น เครือข่ายการกระจายเนื้อหาและการลดขนาด JavaScript จะปรับปรุงทั้งประสิทธิภาพเว็บไซต์ของคุณและความพึงพอใจของผู้ใช้

หากคุณกำลังพัฒนาเว็บไซต์ WordPress และต้องการเพิ่มความเร็ว อ่านเกี่ยวกับ Kinsta Edge Caching เพื่อดูตัวเลขที่น่าประทับใจ