มาลดเวลาโหลด vue ด้วย lazy loading route กัน
ด้วยตัวโปรเจคที่ผมทำอยู่ค่อนข้างใหญ่ เลยมีปัญหาเวลาโหลดครั้งแรกจะค่อนข้างช้า ก็เลยลองหาข้อมูลตรงนี้ดู ก็เลยมาเจอ อันนี้ กับคำแนะนำใน วีดีโอนี้
มาลองเทสกันว่ามันได้ผลเป็นยังไง ก่อนอื่นมาสร้างโปรเจคใหม่กัน
$ vue init webpack vue-test-lazy-route
$ cd vue-test-lazy-route
$ npm installตอนรัน init อย่าลืมลง vue-router นะครับ
ลงเสร็จแล้วมาลองรันกันดูด้วย npm run dev ครับ จะได้ผลแบบนี้
มาสร้างหน้าใหม่เพิ่มอีกสักหน้าเอาเป็นชื่อ Other ด้วยโค้ดนี้
จากนั้นมาอัพเดทไฟล์ router/index.js ให้เห็น Component Other ที่เราเพิ่มไปใหม่
อัพเดท template ไฟล์ Hello.vue จะได้กดไปหน้า /Other ได้ง่าย ๆ
จากนั้นกด Ctrl + F5 ใน browser ที่เราเปิดไว้ เพื่อ request ไฟล์ใหม่
จะเห็นว่าขนาด app.js เพิ่มขึ้นเป็น 1.3 MB เลยทีเดียว ตรงนี้เป็นเพราะไฟล์ Other.vue ของผมมีขนาดค่อนข้างใหญ่ เพื่อที่จะได้เห็นภาพกันว่าถ้ามีหลาย ๆ page มันจะโหลดครั้งแรกนานขนาดไหน
มาลองอัพเดทให้เป็น Lazy loading กันโดยแก้ไขไฟล์ router/index.js ให้เป็นแบบนี้
ลองกด Ctrl + F5 ใหม่อีกครั้ง
จะเห็นว่าไฟล์ app.js มีขนาดเล็กลงแล้วก็มี 0.js โหลดเข้ามาใหม่ ที่เป็นแบบนี้เพราะเราเปลี่ยนโค้ดตอน import จาก
import Hello from '@/components/Hello'import Other from '@/components/Other'
เปลี่ยนเป็น
const Hello = () => import('@/components/Hello')const Other = () => import('@/components/Other')
มาลองคลิกไปหน้า Other ดู
จะเห็นว่ามีการโหลด 1.js เพิ่มอีกไฟล์ 1.js ก็เป็นไฟล์ Other.vue นั่นแหละครับ
ต้องขอบคุณ code-splitting ของ webpack ยังไงลอง clone ไปดูได้ครับที่ repo นี้
ลองนึกภาพดูว่าถ้าเรามีหลาย ๆ page แต่ไม่ได้ทำ Lazy loading ไว้มันจะโหลดนานขนาดไหน ตรงนี้ผมค่อนข้างขัดใจกับ template webpack ของ vue-cli น่าจะทำตรงนี้มาให้ตั้งแต่แรกเลย เพราะมันค่อนข้างเป็นอะไรที่สมควรทำตาม video นี้ครับ
TL;DR
อย่าใช้ import ธรรดา ควรใช้
const Hello = () => import('@/components/Hello')ท่านี้แทนเวลาโหลด route component ครับ
