Reduce Angular bundle size by remove unused locale in moment.js (without ng eject)

This is my lab test for remove a moment locale from angular app. This article will show you how to reduce Angular bundled size by remove unused locale in moment.js without ng eject

WARNING: This is my first english article. I’m not good english but i think this should be share to other people.

Prepare a lab data

Just install Angular 7 and moment by this command.

And edit app.component.ts to something like this

And build a production bundle with stats json. by

Next i see how many size of moment.js that include to bundle by

And this i a result

Angular bundle with a full locale of moment.js

As you can see total size is around 300KB (Gzipped around 70KB).

First try: Import min edition

After I google for solution i found someone suggest that I can import moment.min.js. That file not include any locale data. So i change code to

The bundle size after changed is

Bundle size after import min version of moment.js

Now size is reduce to around 51KB (Gzipped around 16KB). WOW! At first time I think it works. But when I import a locale data like this code.

And see a bundled size.

bundle size when import min version of moment.js and import localeAs you see we have 2 moment.js and full locale in bundled (one is full version and another one is min version). And if you import another library that use moment.js like chart.js the size will be like that too.

bundle size after import min version of moment.js and import chart.js

Second try: Use webpack plugins

I search in Google again. I see another solution to eject webpack config and add some plugin to remove locale. But for my personal reason i don’t want to eject angular config, So I will skip this solution for now.

Solution: Remove by Replace locale folders.

I found Angular has a feature that can replace environments file up to version that it build. I think I can use this folder to replace locale folder too. So let try

  1. Create a my locale folder and if you use any locale, copy it to this folder.
  2. Edit angular.json to replace default locale. file fileReplacements section and add this code like this.
  3. Build and see a results. (You will see a warning message like “node_modules/moment/locale/af.js” does not exist. But it OK don’t worry it)

The result is

bundle size after remove unused locale.As you can see the size is around 55KB (Gzipped around 17KB) and no other locale except locale that in new locale folder. even if you import chart.js it still not include unused locale too. Like this

Bundle size after remove unused locale and import chart.js

I hope this will be useful. Thanks for reading.

เพิ่ม Index ให้ WordPress เพื่อลดโหลด

อันนี้เป็นบทความสั้นๆครับ เกิดจากการสังเกตว่าใน WordPress ของผมนั้นจะมี Query อันนึงที่ run เยอะมาก และบางทีก็นานมาก ตัวอย่างประมาณนี้ครับ

ซึ่งจากที่เดาคือมันเช็คว่า Attachment ตัวนี้มี Post ไหนใช้บ้าง ผมไม่รู้ว่าตัวไหนเป็นคนเรียกใช้ แต่เนื่องจากมันเยอะมาก เลยทำการเพิ่ม index ให้มัน ทำให้มัน Query ได้เร็วขึ้น

เพื่อความประหยัดผมเลย index meta_value แค่ 10 ตัวพอ (เพียงพอสำหรับ /ปี/เดือน/ ก็ลดไปได้เยอะและ)

แต่อันนี้ไม่ได้ช่วยกับทุกคนนะครับ บางทีมันอาจจะมาจาก Theme หรือ Plugin ก็ได้ ดังนั้นต่อให้ท่านใช้ไปก็ไม่อาจจะรับประกันได้ว่ามันจะช่วยท่านได้

WTF AR-BRO Support – บันทึกความกากของ AR-BRO Support

หมายเหตุ โปรดดูวันที่โพสก่อนตัดสินใจ ในวันที่ท่านได้อ่านบทความนี้ AR-BRO อาจจะปรับปรุงเรื่องต่างๆแล้วก็ได้ 

อันนี้จะเป็นบันทึกเตือนใจ สำหรับผู้ที่อาจจะเข้ามาใช้ AR-BRO นะครับ เป็นประสบการณ์ที่ผมได้จากการ Support ของ AR-BRO ซึ่งเป็น Cloud Provider เจ้าหนึ่งของไทย เขียนตอนเดือน 1 ปี 2017

จริงๆแล้วผมค่อนข้างอคติกับที่นี่พอสมควร ใช้วิจารณญาณในการอ่านด้วยนะครับ สาเหตุที่ผมอคติหลักๆคือมันโฆษณาว่า “ไม่ต้องจ่ายล่วงหน้าเป็นเดือน!” แต่ว่าถ้าจะสร้างเครื่องคุณต้องมีเครดิตในระบบเหลือพอจ่ายให้เครื่อง”ทั้งหมด” รวมกับเครื่องที่จะสร้างใหม่ ล่วงหน้า 21 วัน ซึ่งนั่นหมายความว่าถ้าผมต้องการขยายระบบด้วยการสร้างเครื่อง 599 บาทต่อเดือน (0.89 บาทต่อชั่วโมง) 4  เครื่อง ผมต้องเติมเงิน 1794.24 แม้ว่าจริงๆผมจะอย่างใช้แค่ 3 วัน ซึ่งคิดเป็นเงินแค่ 256.32 บาทเท่านั้น เหลือเครดิตที่ทำอะไรไม่ได้ 1537.92 บาท ยิ่งกว่านั้นถ้าผมใช้เสร็จ ลบเครื่องทิ้ง เดือนต่อไปผมมีเหตุุจำเป็นให้ต้องขยาย 4 เครื่องอีก เครดิตที่เหลือ 1537.92 ไม่สามารถใช้เครื่องขนาด 599 บาท 4 เครื่องได้อีกแล้ว เพราะเครดิตที่เหลือมีไม่พอจ่าย 21 วัน ต้องเติมเพิ่ม 256.32 ก่อนถึวจะใช้ได้  ดังนั้นถ้าใครคิดจะเอามา ขยายระบบเฉพาะหน้านี่ไม่เหมาะอย่างแรงเลยครับ เหมือนเอาเงินไปดองทำไรไม่ได้

เข้าเรื่องต่อไปจะรวมเรื่องที่ Support AR-BRO ตอบมาแบบแปลกๆกันดูครับ

[May 29, 2016 – June XX, 2016] AR-BRO MA ระบบบ่อยจนน่ากลัว

เป็นช่วงตกต่ำที่สุกของ AR-BRO เลยก็ว่าได้ ฃ่วงนั้นผมยังไม่มีเครื่องที่ใช้จริงจังเท่าไหร่ แต่เห็นหลายคนบ่นหนักว่าล่มบ่อยมาก ซึ่งในเหตุการณ์นั้นทาง AR-BRO รับมือด้วยการ ปิดระบบ Ticket, Call Center และการโพสหน้าเพจของ Facebook ไปเลย ซึ่งผมรู้สึกว่ามันดูไม่โปรอ่ะ แล้วมีครั้งนึงที่เค้าบอกว่า MA ตอน ตี 1 มั้ง แต่ผมได้ SMS แจ้งการ MA ครั้งนี้ตอนตี 4  หลัง MA เสร็จไปแล้ว โดยลูกค้าช่วงแรกอย่างพี่เนยจาก nuuneoi.com ยังย้ายกลับไปใช้ Digital Ocean เหมือนเดิมเลย (อ้างอิง)

ปัจจุบัน ปัญหาล่มทั้งระบบไม่เจอแล้วในช่วงหลัง พอไว้ใจได้ในระดับหนึ่ง ตามที่ผมเคยเจอ มีแค่ครั้งเดียวหลังจากช่วงนี้ที่ดับแล้วไม่แจ้ง (วันที่ 17 ธันวาคม 2016)

[September 9, 2016] UBUNTU 14.04 เลิกพัฒนาแล้ว ไม่ปลอดภัย

พอดีว่าผมชอบใช้ Ubuntu แต่ว่า Image ที่ AR-BRO มีให้นั้น Ubuntu 16.04 ซึ่ง ณ วันนั้น VestaCP ไม่รองรับ ผมเลยแจ้งไปทางเพจว่าขอ Image Ubuntu 14.04 ด้วยได้ไหม จริงๆแล้วเรื่องนี้มันจะไม่เป็นปัญหาเลย ถ้าเค้าไม่ดันตอบมาว่า “Ubuntu 14 เลิกพัฒนาแล้วครับมำให้มีรูรั่วจำนวนมาก” ผมนี่ถึงกับเปิดตาราง LTS เลยครับ

AR-BRO บอกว่า Ubuntu 14.04 ไม่ปลอดภัย และเลิกพัฒนาไปแล้ว WTF

สำหรับใครอยากดูว่า Ubuntu 14.04 LTS End of Life วันไหน สามารถดูได้ที่ https://wiki.ubuntu.com/LTS

ปัจจุบัน ตามที่เค้าบอก มันอาจจะจัดการระบต่างๆได้ยาก เค้าเลยไม่ใส่นะครับ และ VestaCP รองรับ Ubuntu 16.04 แล้ว ก็ใช้ Ubuntu 16.04 แทนนะครับ

[December 17, 2016] AR-BRO ปิดเครื่องโดยไม่แจ้งล่วงหน้า

ในวันที่ 17 ธันวาคน 2016 เกิดเหตุการณ์ เครื่องดับถ้วนหน้า โดยไม่มีการแจ้งล่วงหน้าว่าจะ MA หรือว่าเกิดอุบัติเหตุขึ้นอย่างไรก็มิทราบได้  (ผมจำไม่ได้ว่าดับไปช่วง 6.00 น. หรือว่าเริ่มดับช่วง 8.00 น.)  แต่ผลที่เกิดขึ้นคือเครื่องดับไป 2 ชม. ที่ผมรู้เพราะมีคนโทรมาบอกว่าเข้าเว็บไม่ได้ เห็นสถานะเครื่องดับอยู่ ต้องมาเปิดเอง เข้าใจว่าเหตุการณ์นี้น่าจะดับทุกเครื่องเลยครับ เพราะถามจากเพื่อนๆที่ใช้อยู่ก็ดับไปเหมือนกัน  (Ref) และหลังจากเหตุการณ์ AR-BRO ไม่ได้ชี้แจงใดๆทั้งสิ้น (และผมก็ไม่ได้ถามไป) แต่มีการชดเชยเครดิตให้ระดับนึง (Ref)

[January 5, 2017] Ping สูงแบบไม่ทราบสาเหตุ

เดี๋ยวจะหาว่า Support มีแต่เรื่องแย่ๆ อันนี้เรื่องดีๆบ้าง อันนี้เป็นของที่ทำงาน เค้าบอกเว็บช้ามาก ให้ลองดูหน่อย ก็เลยพบว่า PING สูงมาก (150 – 400 ms) ปกติจะประมาณ 3-5ms เท่านั้น เข้าใจว่าเฉพาะ IP 103.x.x.x เพราะเครื่องส่วนตัว IP: 150.107.29.x ปกติดี เลยเปิด Ticket แจ้งไป โดยเค้าแจ้งว่า “Network ภายในบางเส้นทางมีปัญหากำลังรีบดำเนินการแก้ไขครับ”  เค้าใช้เวลาประมาณ 10 นาทีเพื่อแก้ปัญหา แล้วทุกอย่างก็กลับมาเรียบร้อยเหมือนปกติดี

[December 16, 2016 – January 14, 2017] สั่ง npm install แล้วช้า 

อันนี้เป็นเรื่องแปลกๆคือผมไม่สามารถสั่ง npm install เพื่อลง package ต่างๆที่ใช้บน NodeJS ได้ แต่สามารถสั่งคำสั่งเดียวกันบนเครื่องที่บ้าน และที่ทำงานได้ปกติ ไฟล์ package.json ก็ตัวเดียวกัน ซึ่งยังไม่สามารถแก้ปัญหาได้ ที่สำคัญคือทาง AR-BRO ไม่ได้แจ้งอะไรกลับมาเลย ในช่วงแรกผมแจ้งไปทาง Facebook Page เค้าบอกให้ผมลองเปิด verbose mode ดู หลังจากส่งข้อมูลให้เค้าดูหลายๆอย่าง สุดท้ายก็เงียบไปและไม่ได้รับการตอบกลับอีก (เข้าใจว่าหาวิธีแก้อยู่แล้วก็ลืมไปล่ะมั้ง) หลังจากนั้นประมาณ 1 สัปดาห์ผมก็ไปเปิด ticket ในเว็บ AR-BRO อีกที ผลคือเหมือนเดิมครับ ไม่มีการตอบกลับใดๆทั้งสิ้น ถ้านับรวมเวลาตั้งแตตอนนั้นถึงตอนนี้ก็เกือบ 1 เดือนแล้วครับที่ยังไม่มีการตอบกลับใดๆทั้งสิ้น (ในระบบ Ticket) ไม่แม้แต่จะขอข้อมูลเพิ่ม

โดยข้อมูลที่ผมส่งให้มีดังนี้ (ถ้าใครพอเดาสาเหตุได้ก็ช่วยกันหน่อยนะครับ)

จริงๆแล้ว case นี้ผมเดาว่าเค้าน่าจะ limit connection per second เพื่อป้องกันเราเอา host ไปยิงไรสักอย่างมั้งครับ (สังเกตุจากช่วงแรกๆมันจะวิ่งเร็วมาก แล้วก็จะนิ่งไปหลังอ่านไปสักพัก ถ้าลองสั่งหลายๆครั้งสักวันมันผ่านแน่นอน เพราะ npm cache ไว้ แต่บังเอิญผม build docker images ทำให้ในนั้นไม่มี cache และจะไม่ cache เด็ดขาด มันเลยไม่ผ่านสักที)

วันที่ปล่อยโพสนี้ (2017-01-04) ผมได้แจ้งข้อมูลเพิ่มไปใน ticket อีกรอบ ตามข้อสันนิษฐาน 1 ชั่วโมงหลังจากนั้นปิดเคสเลยครับ หายแล้ว รวมเวลากว่าจะตอบ เกือบเดือน ไม่แน่ใจว่าเพราะได้ Hint ไป หรือว่าเพราะระบบจัดการหลังบ้านไม่ดี เลยอาจจะข้ามปัญหานี้ไปต้องคอมเม้นตอบเพื่อดันกระทู้ให้เค้าเห็น

ในที่สุด AR-BRO ก็ตอบแล้ว

วิธีซ่อนลิงค์เวลาพิมพ์เว็บเพจออกจากเครื่องปริ้น

หลายคนเวลาต้องการจะปริ้นหน้าเพจของเว็บใดๆ มักจะประสบปัญหาว่าเมื่อสั่งปริ้นออกมาแล้ว ติดลิงค์เว็บและข้อมูลอื่นๆ ที่ไม่ได้ต้องการออกมาด้วย ที่บริเวณหัวและท้ายกระดาษ ดังรูป

ตัวอย่างการปริ้นที่ติดข้อมูลส่วนเกิน เช่นลิงค์เว็บบริเวณหัวและท้ายกระดาษ

ซึ่งสาเหตุที่เกิดเป็นเพราะตัว Internet Browser กำหนดว่าให้ใส่เป็นค่าตั้งต้น เพื่อป้องกันผู้ใช้ลืมว่าปริ้นจากที่ใดวันที่เท่าไหร่ ซึ่งเราสามารถปิดได้ดังนี้ (ตัวอย่างนี้ข้อใช้ Internet Explorer 11 นะครับ เข้าใจว่า 8 9 10 11 12 ใช้เหมือนกัน)

วิธีแก้ปัญหา

  1. บริเวณมุมขวาบนจะมีรูปเฟืองอยู่ ให้กดรูปเฟืองแล้วตามด้วย Print > Page Setup ตามลำดับ (ถ้ามุมขวาไม่มี ให้ไปหาจากเมนู File แทนนะครับ)
    บริเวณมุมขวาบนจะมีรูปเฟืองอยู่ ให้กดรูปเฟืองแล้วตามด้วย Print > Page Setup ตามลำดับ
  2. จะมีหน้าต่างขึ้นมาดังรูป
    ค่าตั้งต้นเมื่อสั่งปริ้นหน้าเว็บให้เราแก้ในส่วนของ Headers and Footers ตามต้องการ โดยจากบนลงล่างหมายถึงตำแน่งที่จะพิมพ์ข้อมูลออกมา ไล่จาก ซ้าย กลาวง ขวา หากไม่ต้องการให้มีข้อความใดๆให้เลือก Empty ดังรูปต่อไปนี้
    รูปแสดงการตั้งค่าให้ไม่แสดงข้อมูลส่่วนเกินในหน้าเพจ
  3. หลังจากนั้นสั่งปริ้นตามปกติได้เลยครับ จะไม่มีหัวและท้ายกระดาษมากวนใจอีกต่อไป
    ผลลัพธ์จากการปรับแต่ง

 

Script สำหรับ Backup ข้อมูล ย้อนหลัง 7 วัน

อันนี้เป็น Script สำหรับ Backup ข้อมูลผ่าน rsync โดย Backup ย้อนหลัง 7 วัน (สามารถปรับได้)

สิ่งที่ต้องเตรียมก่อนใช้

  1. Linux/Unix Only
  2. ติดตั้ง rsync
  3. เครื่อง Backup ต้องสามารถ SSH Without Password เข้าเครื่องเป้าหมายได้ (ลองอ่านอันนี้ หรืออันนี้ดูครับ)
  4. เครื่อง Backup ต้องติดตั้ง PHP (ไม่จำเป็นต้องมี Apache)
  5. เครื่องเป้าหมายควรมี MySQL Tools (พวก mysqldump เป็นต้น) ในกรณ๊ต้องการสำรองข้อมูลจาก MySQL

Script ที่ใช้

อธิบายคำสั่ง

บรรทัดที่ 1 – 14 เป็นการตั้งค่าเครื่องเป้าหมาย ว่าจะ backup จาก host ใดและ path ใด ข้อมูลการเข้าถึง Database และจำนวนวันที่ backup ย้อนหลัง โดยสามารถตั้งวันที่ backup สูงสุดได้ในบรรทัดที่ 14

บรรทัดที่ 16-19 เป็นการตั้งค่าว่าจะไม่ backup file ใด้บ้าง เช่นพวก cache เราอาจจะไม่ backup เป็นต้น

บรรทัดที่ 21-22 เป็นการสั่ง backup ฐานข้อมูล ให้ออกมาเป็น file.sql

บรรทัดที่ 24 เป็นการสั่งคัดลอก folder เมื่อวาน แบบ Hardlink มาเป็นโฟลเดอร์วันที่ปัจจุบัน โดยการทำ Hardlink จะช่วยประหยักเนื้อที่ได้มากในกรณีที่ไม่เปลี่ยนแปลง เช่นถ้าเราสั่งคัดลอก a.zip ขนาด 1GB ไปเป็น b.zip แบบ Hardlink ขนาดที่จะถูกใช้บน Harddisk จะถูกใช้แค่ 1GB เท่านั้น ไม่ใช่ 2GB แบบปกติ เพราะไฟล์เก็บที่เดียวกัน (อ่านเพิ่มเติมได้ที่นี่)

บรรทัดที่ 26-29 เป็นการสร้าง exclude parameter หรือก็คือเอา บรรทัด 16-19 มาแปลงให้ rsync เข้าใจได้

บรรทัดที่ 31 เป็นการสั่ง rsync จากต้นฉบับมาโฟลเดอร์ปัจจุบัน โดยจะดึงเฉพาะไฟล์ที่มีการเปลี่ยนแปลงหลังจากเมื่อวานเท่านั้น ทำให้ Backup ได้อย่างรวดเร็ว

บรรทัดที่ 33-35 คือสั่งให้ลบโฟลเดอร์ backup ที่เกิน 7 วันทิ้ง

คำแนะนำอื่นๆ

อย่าใช้ script นี้ผ่าน http เพราะมันจะ timeout ให้ตั้ง cronjob เป็นประมาณ php backup.php

ในกรณที่ MySQL เราใช้แต่ InnoDB และไม่มี MyISAM สามารถเอาบรรทัดที่ 21 ออกได้ (บรรทัด mysqlcheck) เพราะ check ไปก็ทำไรไม่ได้ InnoDB ไม่ Support

ในบรรทัดที่ 22 เราจะเห็นว่ามี –lock-tables=false ซึ่งหมายถึงเราจะไม่ lock table ในการเขียน ซึ่งทำให้เว็บสามารถทำงานได้ปกติตอน dump ข้อมูลออก แต่ข้อมูลที่ได้อาจจะไม่ตรงกัน เช่น table a ถึก dump เสร็จแล้ว ในระหว่างที่ dump table b ออกมา มีการเขียนที่ table a และ c ซึ่ง table c ต้องใช้ข้อมูลจาก table a แบบนี้จตะเกิดปัญหาได้ เพราะ table c ที่ถูก dump มีข้อมูลบางอย่างที่ต้องพึ่ง table a แต่ตอน dump table a ตัว table a ยังไม่มีข้อมูลนั้น ทางแก้มี 2 แบบ

  1. ตั้ง –lock-tables=true
  2. ในกรณีที่มีแต่ InnoDB ให้ใช้ –single-transaction แทน