บันทึกการลด code ซ้ำซ้อนใน Route ของ Vue.js นิดหน่อย

ได้รับ project ที่พัฒนาฝั่ง Frontend ด้วย Vue.js มาทำ
พอลองไปเปิดดูในส่วนของ Vue Routing
พบว่าเขียน code ซ้ำ ๆ และ import เยอะมากมาย
ก็เลยทำการ refactor code นิดหน่อย
กับไปเจอ comment webpackChunkName อีก ทำไปทำไมนะ ?

เริ่มแรกเจอ code ใน Routing แบบนี้ทนไม่ไหว เลยขอแก้ไขหน่อย

โดยที่ต้นฉบับจะมี 2 แบบให้เลือกเลย

แบบที่ 1 ทำการ import ก่อนใช้งาน

[gist id="4d67b96eaca0d8891f7f04982fbc0daf" file="1.js"]

แบบที่ 2 ทำการ import แบบ inline หรือ lazy load ไปเลย

[gist id="4d67b96eaca0d8891f7f04982fbc0daf" file="2.js"]

ทั้งสองแบบมีสิ่งที่เหมือนกันคือ  duplication นั่นเอง

เลยทำการยุบ duplication ลงไปหน่อย
แต่ยังคงความ lazy load อยู่
ก็จะได้ดังนี้

[gist id="4d67b96eaca0d8891f7f04982fbc0daf" file="3.js"]

จากนั้นไปเห็นว่ามี comment แปลก ๆ คือ webpackChunkName

มันคืออะไรนะ ตอนสร้าง project เล่นใหม่ ๆ ก็มีนะ แต่ไม่ยอมดู

ตรงนี้ก็งง ๆ เพราะว่าไม่เคยทำ แต่พอไปอ่านดู
เขาบอกว่า feature ใช้ได้กับ webpack 2.6.0 ขึ้นมา
จะทำการใส่ชื่อของแต่ละ route ไปในชื่อไฟล์ที่สร้างออกมา หลังจากการ build

มือใหม่หัดเขียนในงานจริง มันก็จะลำบากมากหน่อย
บันทึกไว้กันลืม