วิชาตัวเบา: วิธีทำแอพเบาเป็นเท่าตัว

Ta Theerasan Tonthongkam
ta tonthongkam
Published in
3 min readJul 23, 2018

คุณเคยประสบปัญหานี้หรือไม่ — ทีม Marketing รู้ว่าคนจะเล่น Facebook เวลาเดินทางกันเป็นส่วนใหญ่ เลยยิงโฆษณาให้ Download App ในช่วงนั้นๆ กลุ่มเป้าหมายเห็น เลยกดโหลด แต่แอพดันหนักเกินไป ใหญ่เกินไป บางคนก็ Pause ไปโหลดต่อที่บ้านซึ่งส่วนใหญ่ลืม บางคนก็ลบแอพโดยพลัน

ดังนั้นในฐานะที่เราเป็นนักพัฒนา เราสามารถช่วย Marketing ได้โดยทำให้แอพเบาลง

วิธีลด Package Size

การลด Package Size ทำได้หลายวิธี ถ้าเป็นแอพที่สร้างใหม่ละก็สามารถทำตาม Best Practice ดังนี้

เพิ่ม ProGuard

ProGuard จะทำหน้าที่ลบโค้ดที่เราไม่ใช้ออก เวลาที่เราสร้าง Package; Uglify โค้ด เปลี่ยนชื่อตัวแปรต่างๆ เป็น a, b, c ก็ตามแต่ แต่ไม่เปลี่ยน Logic ของโค้ดทำให้โค้ดสั้นลง file ก็เล็กลงด้วย และที่สำคัญคือการย่อขนาด Resource file ให้เล็กลง

File Size Chart

จะเห็นว่าสุดท้ายแล้ว File ที่ใหญ่จริงจังคือ res มันกินขนาดเกือบ 70% ของเนื้อที่แอพทั้งหมดเลยนะ ProGuard ก็จัดการส่วนนี้ให้อีก เยี่ยมจริงๆ

ใช้ SVG แทนรูปภาพ

SVG จะให้ภาพที่คมชัดกว่า ละเอียดกว่า และขนาดเล็กกว่า PNG และเมื่อมันโดนขยาย ภาพไม่แตกด้วย — สุดไปเลย

ใช้รูปภาพให้ตรง Dimesion

ภาพบางภาพเราไม่สามารถทำเป็น Vector ได้ดังนั้นต้องใช้รูปภาพแทน แต่ใน Android จะมีสิ่งที่เรียกว่า Fragmetation อยู่ ดังนั้นการใช้รูปภาพต้องใช้ขนาดที่เหมาะสมกับในแต่ละ Dimension ด้วย ไม่ใช่ใช้ภาพที่ใหญ่เกินไป แค่นี้เราก็ประหยัดเนื้อที่ไปได้เยอะแล้ว

ทุกอย่างดูเหมือนง่าย และน่าจะทำได้ง่ายๆ แต่ในโลกความเป็นจริงแล้ว มันไม่ง่ายเลย ถ้าจะต้องมาลดขนาดใน Legacy Application

วิชาตัวเบาใน Legacy Application

ในโปรเจคที่มีอายุยาวนานบางโปรเจค แม้แต่ Code Architecture ยังไม่มีเลย การจะอัพเดทอะไรสักอย่าง เป็นเรื่องยากมากกกก ใช้เวลาหลาย Man Days กันเลยทีเดียว — การเปิด ProGuard ถ้าไม่ทำมาแต่แรก ไม่ต้องพูดถึง การเปลี่ยนภาพเป็น SVG ยิ่งไปกันใหญ่ ต้องอาศัย Designer Resource อีก — แล้วมันจะมีวิธีที่ทำให้แอพเบาขึ้นง่ายๆ มั้ย คำตอบคือ มี!!! และง่ายด้วย

บีบอัดรูปภาพ

จากที่เกริ่นไปข้างต้น ส่วนที่หนักที่สุดของ App คือ res งั้นเรามาลดขนาดส่วนนี้กันก่อน โดยใช้โปรแกรมบีบอัดภาพ ตัวที่ผมใช้อยู่คือ PngYU วิธีใช้ก็ง่ายๆ เลย

  1. เปิด PngYU ขึ้นมา
  2. ลาก Folder โปรเจคใส่ลงไป
  3. ตรวจสอบ List ของรูปภาพ
  4. กด Start Compress

จากนั้นตัวโปรแกรมจะบีบอัดภาพให้เรา บางครั้งขนาดไฟล์ลดลงถึง 50-70% เลยทีเดียว

Drag files to PngYU

หลังจากกด Compress จะใช้เวลาประมาณนึงอาจจะ 1–5 นาที แล้วแต่ขนาดของโปรเจค และจำนวนของรูปภาพ

ผลการ Compress

หลังจาก Compress file size ของ res ลดลงมากๆ เมื่อ Build Apk ขนาดมันก็เล็กลงเช่นกัน

ลบ file ที่ไม่ใช้

เราสามารถเพิ่ม Android Lint ให้โปรเจคเรา จากนั้นรัน linter เพื่อให้มันเช็คว่า Resource ตัวไหนไม่ใช้บ้าง แล้วตามลบมันซะ ใน Legacy แอพมักจะมี file ไม่ใช้เยอะเลย ต้องลบมันออกนะ จะได้ไม่เป็นภาระกับ User

ให้เราไปที่ Gradle icon ด้านขวา เลือก Project Name →Tasks →Verification →ดับเบิลคลิกที่ lint

lint command

Android Studio จะรัน Task ประมาณ 1–2 นาที แล้วแต่ขนาดของโปรเจค เมื่อ Run เสร็จแล้ว เราจะได้ Report ตาม path นี้

{your project root}/config/quality/lint/report/consumer-lint.html

เมื่อกดเข้าไปดูจะเป็นเว็บไซต์ จากนั้นก็ไปที่ส่วนของ Unused Resource ดู File ต่างๆ ที่ไม่ใช่ แล้วลบทิ้งซะ

ตัวอย่าง Unused Resource

แต่ความพีคของ Linter คือ มันสามารจับได้ว่ามีรูปมากกว่า 1 รูปที่ซ้ำกัน แต่ตั้งชื่อคนละชื่อ เราลบออกให้เหลืออันเดียว แต่อย่าลืมตามแก้ในโค้ดให้เรียกใช้ resource ที่ถูกต้องด้วยนะ

Optimize ขนาดรูปในแต่ละ Dimension

จากนั้นเรามาดูว่ามันยังเหลือรูปภาพที่ขนาดไฟล์ใหญ่กว่า 500 kb อีกมั้ย ในกรณีของผมคือ Splash Screen ที่ File มันยังเหลือ 1.9 mb ต่อให้บีบอัดแล้ว เมื่อเข้าไปดู file ถึงกับอึ้ง เพราะไซส์รูปภาพมัน 2800 px * 3700 px — บาปบุญ จะเอาไปแสดงของ Billboard หรือไง จากนั้นจะไล่ Resize ภาพที่มันใหญ่เกินจำเป็นซะ T T

ผลจากการใช้วิชาตัวเบา

Package Sizes

จะเห็นว่า APK ดั้งเดิมอยู่ที่ 34.5 MB ลดเหลือ 12 MB ซึ่งมันลดลงเกินครึ่ง และสามารถทำได้ในเวลา 0.5 Man days ด้วยซ้ำ แลกครึ่งวันกับยอดโหลดที่มากขึ้น ถือว่าคุ้มค่ามากเลยนะ

สรุป

การเขียนแอพที่ดีนอกจากจะต้องคำนึงเรื่อง โค้ด, ui, ux แล้ว บางครั้งเราก็ต้องทำบางอย่างเพื่อภาพรวมของธุรกิจเช่นกัน ในตัวอย่างนี้เป็นตัวอย่างหนึ่งที่สามารถเจอได้ในชีวิตจริง คือ User บ่นว่าแอพหนักเครื่องไป — ถ้าเราทำแอพพลิเคชันใหม่ตั้งแต่ต้น ควรจะทำตาม Best Practise ซะตั้งแต่แรก แต่สุดท้ายแล้ว ถ้าเราต้องแก้แอพ Legacy มันก็มีวิธีแก้ปัญหาในแบบของมัน อย่าลืมใช้วิชาตัวเบากันด้วยหล่ะ เพื่อลดขนาด APK ไฟล์ลง แต่ทำให้ User ตัดสินใจ Download ได้ง่ายขึ้น

ขอบคุณที่อ่านจนจบจ้าาา

— จบ —

ไปปั่นยอดวิวกันด้วยนะพวกเธอว์

เพลง วิชาตัวเบา bodyslam

--

--