ได้รับ project ที่พัฒนาฝั่ง Frontend ด้วย Vue.js มาทำ
พอลองไปเปิดดูในส่วนของ Vue Routing
พบว่าเขียน code ซ้ำ ๆ และ import เยอะมากมาย
ก็เลยทำการ refactor code นิดหน่อย
กับไปเจอ comment webpackChunkName อีก ทำไปทำไมนะ ?
เริ่มแรกเจอ code ใน Routing แบบนี้ทนไม่ไหว เลยขอแก้ไขหน่อย
โดยที่ต้นฉบับจะมี 2 แบบให้เลือกเลย
แบบที่ 1 ทำการ import ก่อนใช้งาน
แบบที่ 2 ทำการ import แบบ inline หรือ lazy load ไปเลย
ทั้งสองแบบมีสิ่งที่เหมือนกันคือ duplication นั่นเอง
เลยทำการยุบ duplication ลงไปหน่อย
แต่ยังคงความ lazy load อยู่
ก็จะได้ดังนี้
จากนั้นไปเห็นว่ามี comment แปลก ๆ คือ webpackChunkName
มันคืออะไรนะ ตอนสร้าง project เล่นใหม่ ๆ ก็มีนะ แต่ไม่ยอมดู
ตรงนี้ก็งง ๆ เพราะว่าไม่เคยทำ แต่พอไปอ่านดู
เขาบอกว่า feature ใช้ได้กับ webpack 2.6.0 ขึ้นมา
จะทำการใส่ชื่อของแต่ละ route ไปในชื่อไฟล์ที่สร้างออกมา หลังจากการ build
มือใหม่หัดเขียนในงานจริง มันก็จะลำบากมากหน่อย
บันทึกไว้กันลืม
