วิธีการทำ lazy load module ใน angular 5
วิธีการเขียนโปรแกรมด้วย angular นั้นในกรณีที่โปรแกรมเรามีขนาดใหญ่ หลายหน้า หลาย feature เมือเราทำการ build แล้วตัว angular จะทำการรวม file ทั้ง project เป็น file เดียวทำให้ load file js มีขนาดใหญ่ก็จะส่งผลให้ load หน้า web ช้า ในตัว angular เองมีความสามารถที่เรียกว่า lazy load หรืออธิบายง่ายๆ ก็คือเมื่อเรียกใช้แล้วค่อย load js ชุดนั้นๆ มาซึ่งข้อดีก็คือจะให้เราโหลดหน้าได้ ไวขึ้นมากเพราะขนาด file เล็กลง ข้อดีที่สองคือในการที่เราแยกเป็น module แล้วจะทำให้เราสามารถที่จะทำ routing แยก feature ได้อย่างง่ายดาย
เริ่มต้นกันด้วยการสร้าง project angular ขึ้นมาในที่นี้จะใช้วิธีการสร้างผ่าน angular-cli นะครับ ด้วยคำสั่งดังนี้
ng new test-ng --routingจากคำสั่งด้านบน test-ng คือ ชื่อ project ที่เราต้องการสร้างสามารถใช้ชื่ออะไรก็ได้
และเรามีการเติม option --routing เข้าไปเพื่อบอกว่า project เรามีการใช้ routing ด้วย ถ้าไม่เติม option นี้เราสามารถมาสร้างเอาทีหลังได้นะครับแต่ค่อนข้างยากกว่านะครับ
หลังจากที่สร้าง project เสร็จแล้วเราก็ใช้ IDE อะไรก็ได้มาเพื่อเปิด project เพื่อเพิ่มเติม code เข้าไปในที่นี้เราขอแนะนำ Visual Studio Code สามารถ download ได้จาก link นี้นะครับ
เมื่อเปิด visual studio code มาแล้วก็มาสร้าง module ใน project กันด้วยคำสั่งดังนี้ครับ
ng g module auth --routing
ng g module orders --routingจากคำสั่งด้านบน auth, orders คือชื่อ module ที่เราต้องการสร้างนะครับ
คำสั่ง ng g module ต้อง run ภายใน project เรานะครับ
เรามีการใช้ --routing เพื่อจะบอกว่าใน module เรามีการแยก routing ออกมา
หลังจากรันคำสั่งเสร็จแล้วจะได้ผลลัพธ์ดังภาพนะครับ
ใน 1 module สามารถมี folder อะไรก็ได้จากภาพด้านบนเราสามารถสร้าง folder components เข้าไปเพื่อเก็บ component ต่างๆ ของเรา หรือเราจะสร้าง component ภายใต้ module นั้นๆ เลยก็ได้เช่น component login อยู่ภายใต้ auth เป็นต้น ใน module ใน module เราจะมี file 2 file อันได้แก่ auth-routing.module.ts กับ auth.module.ts โดย file auth-routing.module.ts เอาไว้เก็บข้อมูล route เขาเราในการทำ vitual path ส่วน aut.module.ts เอาไว้ load component, service ต่างๆ ของ module เรา
เสร็จแล้วเรามาสร้าง component เข้าได้ด้วยคำสั่งดังนี้
ng g component auth/login --module=auth
ng g component orders/components/order-form --module=ordersจากคำสั่งด้านบนเราสามารถสร้าง component เข้าไปที่ module auth, orders
หลังจากที่เราสร้าง component เสร็จแล้วเราสามารถสร้าง route ได้ดังนี้
หลังจากนั้นเราก็ไปใส่ tag <router-outlet></router-outlet> ที่ file app.component.html ดังภาพ
จากนั้นเราก็จะไปทำการเรียกใช้ module เราแบบ lazy load ที่ file app-routing.module.ts ดังนี้
จากตัวอย่างเรามีการปรับจากเดิมที่เราเรียก path ไปที่ component ก็เปลี่ยนมาเป็นเรียก loadChildren แทนเพียงเท่านี้ระบบเราก็จะทำการ lazy load ได้แล้ววิธีการทดสอบให้ start server ด้วยคำสั่งดังนี้
ng serveแล้วเข้า url = http://localhost:4200/ แล้วกด link สลับไปมาจะเห็นว่าเมื่อเราไปที่ /auth ครั้งแรกจะมีการ load file js ดังภาพ แต่ถ้ามาครั้งที่สองจำไม่ทำการโหลดอีกแล้ว
หลังจากที่ได้ลองใช้มากับหลาย project ที่เห็นชัดเลยคือเวลาในการ load หน้าลดลงอย่างมาก และสามารถทำให้เราเปิดปิด feature ได้ง่ายกว่าเดิมมาก การแก้ไข file routing ก็เรียบง่ายขั้นมาก สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolution หรือ web site : www.pnpsw.comได้ครับ
