Angular ว่าด้วยเรื่อง Build

 bb

Working Software คือ เป้าหมาย

สำหรับการพัฒนา Software มันจะมีขั้นตอนในการแปลง source code และ resources ต่างๆให้ออกมาเป็น “ของ” ที่พร้อมที่จะ deploy เป็นระบบที่ทำงานได้จริง (Working Software) เราเรียกกระบวนการนี้ว่า การ “build” ซึ่งไอ้การ build แต่ละครั้งเราก็มีเหตุผลที่ต่างกันไปเช่น เพื่อทดสอบระหว่างการพัฒนา เพื่อให้ QA ทดสอบ UAT หรือ Go live ใช้งานจริงๆ

สำหรับ Angular เรานิยมใช้ Angular CLI เพื่อช่วยทั้งสร้างโปรเจค สร้าง source code และแน่นอนรวมทั้ง build ของด้วย เราจะไปดูว่ามันจะช่วยเรา build ได้แบบไหน ยังไงบ้าง 🙂

แล้ว Angular CLI มี build แบบไหนบ้าง ?

ปกติเราจะ build ตาม environment ต่างๆกันไปตามที่ออกแบบ เช่นอาจจะแบ่งเป็น alpha, beta, prod แต่ถ้าจะให้แยกตามลักษณะ output ที่ออกมาจะแยกออกเป็น 2 แบบคือแบบ dev กับ prod การทดลองนี้จะลอง ng new ngdemo โง่ๆขึ้นมาตัวนึง แล้วมาลอง build ดูกันว่าจะได้ผลกันยังไง

Build สำหรับการพัฒนาระบบ

ng buld —dev

Screen Shot 2560-06-19 at 11.29.53 PM

Screen Shot 2560-06-19 at 11.32.53 PM

เวลาเรา build ด้วย option นี้ เราจะได้ประโยชน์คือเราจะได้ source mapping มาด้วย (สังเกตุขนาดไฟล์ vendor.bundle.js ที่ได้มาหลัก MB เลย) ดังนั้นเวลาเราพัฒนาแล้วเกิดเจอ error อะไรมันก็ยังกลับจุดทีมีปัญหาได้ว่ามาจากตรงไหนไฟล์ไหนนั้นเอง

Build สำหรับใช้งานจริง

ng build —prod

Screen Shot 2560-06-19 at 11.34.59 PM

Screen Shot 2560-06-19 at 11.35.26 PM

สิ่งแรกที่อยากให้สังเกตคือจะเห็นว่าขนาดไฟล์ลดขนาดไปพอควร โดยเฉพาะ vendor.xxx.bundle.js ลดลงจากหลัก MB ไปหลัก 3xx kB เพราะการ build ด้วย option นี้จะตัดสวนของ source mapping ออกไปนั้นเอง

อย่างที่สองที่อยากชวนดูคือ ชื่อไฟล์ มันจะมีตัวอักษรแปลกๆแปะมาระหว่างชื่อไฟล์ ตัวอักษรแปลกๆพวกนี้คือ hashing ที่ได้จากไฟล์นั้นๆ ถ้าไม่มีการแก้ไขในไฟล์ hash ที่ได้ก็จะได้เลขเดิมเสมอ ซึ่งมันจะช่วยในเรื่อง browser caching นั้นเอง

ต่อมาที่น่าสนใจคือ styles.bundle.js ถูก extract ออกมากลายมาเป็น styles.xxx.bundle.css แทน ก็เพื่อใช้แสดงผลตามปกติของ css ที่มันควรจะเป็น

นอกจากนี้เวลา build แบบ prod นี้ยังมีเรื่องการ Ahead-of-Time Compilation อีก ดังนั้นเวลาเราต้องการ build ของสำหรับใช้งานจริงควรจะใช้ option นี้

ตารางเปรียบเทียบ –dev กับ –prod

Flag --dev --prod
--aot false true
--environment dev prod
--output-hashing media all
--sourcemaps true false
--extract-css false true

สรุป

ก็น่าจะเห็นภาพมาขึ้นสำหรับเรื่องการ build โปรเจคทั้ง 2 แบบด้วย ng build ของ Angular CLI เหมือนเดิมครับ ถ้าใครมีเทคนิคแจ่มๆเอามาแบ่งกันได้นะครับ สวัสดีครับ (-/\-)

อ้างอิง : https://github.com/angular/angular-cli/wiki/build

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s