ลองเล่น 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 กันนะครับ

แบบไม่ใช่ code splitting

จากนั้นเราลองเรียก components แบบที่ Evan You กล่าวไว้กัน

โดยเปลี่ยนจาก

import show from './Show.vue'เปลี่ยนไปเป็นconst show = () => import('./Show.vue')

จากนั้นเราลองรัน build

เเล้วได้ผลลัทธิ์

แบบใช้ code splitting

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

ถ้าโปรเจคเรามีขนาดใหญ่หลาย mb เนี่ยวิธีนี้น่าจะทำให้ช่วยให้ได้นะครับ

เเหล่งข้อมูลครับ

Kamonpob Pangwongtong

Written by

JUKE Master WTF! JUKE code

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade