ลองเล่น Code Splitting by Vuejs

จะบอกว่าการจัดการกับการโหลดหน้าจอมีผลกับการใช้งานอย่างมากเลย หากยิ่งเรามีหลายๆ ไฟล์ หลาย components
Code Splitting คืออะไรอะ …..
Code Splitting จะเข้ามาแก้ปัญหานี้ให้ทำให้เราแก้ปัญหาการโหลดเว็บได้ ทำให้เวลาเรา build production จะมีการเเยกไฟล์เองทำให้ไม่ต้องรอโหลดนั้นเอง
แทนที่เวลาโหลดเราจะใช้เเค่ไฟล์ app.js ธรรมดาเราก็เเยก lazy load ออกจากกันไปเลยดิ
ซึ่งการเรียกใช้งานก็ง่ายเเสนง่ายมั้งนะ
ผมขอยกตัวอย่าง Vue เเล้วกันนะครับ เพราะว่า Vue มัน build มาเเล้วใน Webpack2 นั้นเองตามที่ท่าน Evan You มันทำได้เเล้วนั้นเอง โดยเเค่พิมพ์คำสั่ง
const foo = () => import('./foo.vue')ง่ายจริงๆ จะบอกให้ เเค่เนี่ยล่ะครับ
เรามาลองกันเลยดีกว่าครับ
$ vue init webpack code_spiltting
$ cd code_spiltting
$ yarn
$ atom .
$ yarn devจากนั้นเราก็โม code กันเลย ยกตัวอย่างพอเราลงเสร็จผมจะเเยกมันออกเป็น 2 components ตามนี้เลย
ไฟล์ Hello.vue โดยปกติเราจะใช้เเค่
import show from ‘./Show’เเละแก้ไฟล์ Show.vue
ตอนนี้เรามี 2 components เเล้วนะครับ จากนั้นผมจะลอง
$ yarn devดูผลลัทธิ์กัน

จากนั้นพระเอกของเราผมจะลอง run build เพื่อขึ้น prodruction กันนะครับ
$ yarn build /* or npm run build */มาดูผมลลัทธิ์กันเวลา build file ด้วย webpack กันนะครับ

จากนั้นเราลองเรียก components แบบที่ Evan You กล่าวไว้กัน
โดยเปลี่ยนจาก
import show from './Show.vue'เปลี่ยนไปเป็นconst show = () => import('./Show.vue')
จากนั้นเราลองรัน build
เเล้วได้ผลลัทธิ์

เอาเทียบอีกรอบล่ะกัน ถ้าใช้แบบ code splitting มันจะเเยก js เพิ่มขึ้นมาอีกไฟล์เพื่อจะให้มันจัดการ lazy load ให้นั้นเอง เป็นวิธีที่ง่ายดีนะครับ ฮ่าๆๆ
ถ้าโปรเจคเรามีขนาดใหญ่หลาย mb เนี่ยวิธีนี้น่าจะทำให้ช่วยให้ได้นะครับ
เเหล่งข้อมูลครับ
