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.

การใช้ font THSarabun หรือภาษาไทย ใน mpdf 7

อันนี้เป็นเพียงตัวอย่างอย่างสั้นที่สุดที่ เพื่อ demo ให้ดูนะครับ ต้องไปประยุกต์เอาเอง

  1. ติดตั้ง mpdf โดยสั่ง composer require mpdf/mpdf
  2. สร้าง folder ชื่อ font แล้วเอา font ใส่ลงไป (พวกไฟล์ .ttf เช่น Sarabun-Regular.ttf)
  3. code ตามนี้ครับ (จุดสำคัญคือบรรทัด 18 key ของ array ต้องเป็นตัวเล็กหมด)
  4. ลองทดสอบครับ ใช้ได้เลย

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

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

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

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

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

สอนใช้ Facebook Comment Moderation Tools เบื้องต้น และการทำ Comment Mirroring

วันนี้เราจะมาสอน Facebook Comment Moderation Tool ถ้าถามว่ามันคืออะไร มันคือเครื่องมือจัดการ Comment ของ Facebook ที่เกิดจาก Facebook Comments Plugin (ถ้ายังไม่รู้จัก มันคือกล่อง Comment Facebook ที่ประกฏบนเว็บต่างๆ เช่นเว็บนี้เป็นต้น ลองเลื่อนไปดูตัวอย่างด้านล่างได้ครับ) โดยเครื่องมือนี้นอกสามารถลบ Comment ต่างๆที่ไม่ต้องการได้แล้ว ยังมีฟีเจอร์บางอันที่หลายๆคนไม่รู้มาแนะนำด้วย ซึ่งมันคือการตั้ง Blacklist คำ และ Mirroring Comment

การตั้งค่าการใช้ Facebook Comment Moderation Tool

  1. ติดตั้ง Facebook Comment Plugins ให้กับหน้าต่างๆ ตามปกติ  (ในบทความขอไม่สอนวิธีการเอา Comment Plugins มาใส่ในนะครับ ถ้าใช้ WordPress จะมี plugins เยอะแยะ)
  2. ตั้งค่า Admin มี 2 วิธีคือ
    1. ไปสร้าง app facebook (ดูวิธีสร้าง app ได้ที่นี่) แล้วใส่คำสั่งนี้ลงใน <head> ของทุกหน้า

       
    2. ใส่เป็น Facebook user id โดยใส่คำสั่งนี้ลงใน <head> เช่นกัน

      ถ้ามีคนเดียวก็ใส่บรรทัดเดียว มี 2 คนก็ใส่ 2 บรรทัด มีกี่คนก็ใส่ไปเท่านั้นคน

      โดยส่วนตัวแนะนำวิธีสร้าง App ID มากกว่า ครับ เพราะใช้ Facebook Comment Mirror ได้ และถ้าใช้ WordPress และลง Plugin Yoast SEO สามารถนำ App ID ไปใส่ใน Yoast SEO ได้เลย ในหน้า Social – Yoast SEO ในแทบ Facebook จะมีช่องให้ใส่ Facebook App ID ได้เลยครับ ไม่ต้องแก้ Code ใดๆ

  3. สำหรับคนใช้แบบ App ID ต้องไปเช็คการตั้งค่าใน Facebook For Developer ในส่วนของ App โดยกดเข้าไปใน Facebook App ที่เราผูกกับเว็บไซต์ไว้ (app id ที่เราเอาไปใส่ใน head) ให้เข้าไปที่ Settings > Advanced และให้เปิดตัวเลือก Social Discovery เพื่อให้คนที่ไม่ได้ Login facebook สามารถมองเห็น Comment ได้
    เปิด Social Discovery ใน Settings ของ App

วิธีใช้ Facebook Comment Moderation Tool เบื้องต้น

  1. ให้เข้าไปที่หน้า Facebook Comment Moderation Tool
  2. เมื่อเข้าไปแล้วจะพบหน้าตาดังนี้ (หากมี Comment อยู่)
    หน้าตาของ Facebook Comment Moderation Toolโดยจากภาพส่วนที่แสดงต่างๆมีดังนี้

    1. เอาไว้เปลี่ยน App หรือเว็บกรณีมีมากกว่า 1 เว็บ
    2. เป็นลิงค์เพื่อไปดูบทความหรือหน้าต้นฉบับ ว่าเนื้อหาเป็นอะไร
    3. เป็นส่วนจัดการต่าง โดยไล่จากซ้ายไปขวาคือ
      1. Approve สำหรับยินยอมให้เนื้อหานั้นแสดงผลบนเว็บเรา (หากเปิด Public ไว้จะไม่มีผลใดๆ ไม่ต้องกดก็แสดงอยู่ดี)
      2. Hide คือซ่อนความเห็นนั้นไม่ให้แสดง
      3. Report Spam ตามชื่อ คือบอก Facebook ว่า Comment เป็น Spam
      4. More ในปัจจุบันในเมนูนี้ผมไม่เห็นตัวเลือกอื่นนอกจาก Ban User ให้ไม่สามารถมาโพสในเว็บเราได้อีกต่อไป
    4. Settings เป็นการตั้งค่าต่างซึ่งจะอธิบายในหัวข้อต่อไป
  3. พอดีทำรูปเสร็จเพิ่งเห็นขี้เกียจแก้รูป ขออธิบายตรงนี้นะครับ ข้างล่างหัวข้อ 1 จากภาพด้านบนจะมีแทปต่างๆ ให้เราดู โดยแต่ละอันมีความหมายดังนี้
    1. Review คือรอการตรวจสอบ ถ้าเรากด Approve จะไป Public (แต่ถ้าตั้ง Public ไว้ไม่ต้องกดมันก็แสดงให้คนอื่นเห็น)
    2. Public คือ Comment ที่แสดงบนเว็บแล้ว
    3. Hidden ความเห็นที่ถูกซ่อน
    4. Flagged กับ My Queue ไม่เคยใช้ครับ ใครรู้บอกด้านล่างทีครับ T_T

ค่าต่างๆที่สามารถตั้งได้ในหน้า Settings ของ Facebook Comment Moderation Tool

หน้า Settings

หน้า Settings ของ Facebook Comment moderation tool

ในหน้านี้จะมีให้ปรับดังนี้ (ไล่จากบนลงล่าง)

  1. เรียง Comment ตามอะไร โดย
    – Top คือให้ Facebook เป็นเลือก ว่าอันไหนดีที่สุด
    – Newsest คือจะเห็นใหม่สุดก่อน
    – Oldest คือแสดงเก่าสุดก่อน
  2. Enable Attachments คือการอนุญาติให้ผู้ใช้คอมเม้นเป็นภาพหรือ Sticker ได้
  3. Enable Notifications คือบอกว่าถ้ามีคน Comment บนเว็บเราให้แจ้งเตือนในเฟสเราไหม
  4. Comment Mirroring จะขึ้นเมื่อใช้ Admin เป็นแบบ App เท่านั้น มันคือฟีเจอร์ที่ Facebook ทำไว้ให้ โดยความสามารถของมันคือตามชื่อมันคือการส่ง Comment ที่โพสบนเว็บ ไปแสดงบน Post ที่แชร์ URL นั้นบน Page ที่เราเลือก และหากมีคน Comment บน Post ที่แชร์ URL นั้นบน Page ที่เราเลือก ก็จะไปแสดงบนเว็บของเราด้วยเช่นกันครับ (แต่ใช้ได้เฉพาะหน้าใหม่ๆ ที่ Facebook ไม่เคยเห็น ถ้าเป็นหน้าเก่าที่เคยแชร์แล้วจะไม่มีผล)

หน้า Moderation Rules

หน้า Moderation Rules ของ Facebook Comment moderation tool

ในหน้านี้จะตั้งค่า

  1. ความยาวสูงสุดต่อ Comment อย่างของผมคือ 5000 ตัวอักษร
  2. ตั้งค่าปิดไม่ให้ Comment หลัง Facebook เจอบทความนั้นไปแล้วกี่วัน (การเจอของมันเช่นมีคนไลค์ หรือแชร์)
  3. เปิด Mode Spam Filter แบบ Aggressive อันนี้อธิบายง่ายๆคือเพิ่มระดับ Spam Filter ให้สูงขึ้น ทำให้บางครั้งอาจจะไป Filter เอา Comment จริงๆออกด้วย ไม่แนะนำให้เปิด
  4. ตรวจว่ามีกี่ลิงค์ใน Comment ถ้ามีมากกว่าที่เรากำหนด ให้เราต้องมาตรวจก่อน ถึงจะแสดงได้
  5. ตั้งค่าการตรวจสอบ โดยแต่ละอันหมายถึง
    1. Public = เปิดกว้างคือ Comment ปุปขึ้นเลยไม่มีการตรวจสอบ ถึงมี Blacklist Word ก็แสดงอยู่ดี
    2. Review Blacklisted Comments = แสดงทั้งหมด ยกเว้น Comment ที่มี Blacklist Word ซึ่งเราจะต้องตรวจสอบก่อนแสดง (วิธีตั้ง Blacklist จะสอนในหัวข้อถัดๆไป) แนะนำอันนี้ครับ
    3. Closed = ซ่อนทุกความเห็น Comment ที่ไม่มี Blacklist Word เท่านั้น ถ้ามีจะถูกลบไปเลย ถึงจะแสดงใน Review และต้องกด Approve ทุก Comment ถึงจะแสดง

หน้า Moderators

หน้านี้เอาไว้ตั้งว่าใครบ้างที่สามารถตรวจสอบ Comment ได้

หน้า Blacklist

หน้า Blacklist ของ Facebook Comment moderation tool

หน้านี้เอาไว้ตั้ง Blacklist Word โดยแนะนำว่าการตั้งจะต้องนำหน้าและตามหลังด้วย .* เช่นเราจะห้ามคำว่า มีเวลาว่าง (เอามาจาก “มีเวลาว่าง 2 – 3 ชม ไหม”) ผมต้องใส่ไปว่า .*มีเวลาว่าง.* จากนั้นให้กด Enter 1 ที หากถูกต้องจากขึ้นประมาณนี้ (ของผมมี 3 คำ ใส่ไปเป็นตัวอย่าง)
ตัวอย่างการตั้ง Blacklist Word ใน Facebook Comment moderation tool

หน้า Banned Users

ตามชื่อเลยครับ เป็นหน้าสำหรับตั้งค่าว่าใครถูกแบนไม่ให้ Comment ในเว็บเราบ้าง สามารถใส่ชื่อไปได้เลยครับ

วิธีปิดกล่อง Comment ตรงกล่อง Chat ของ Facebook (Post Tabs)

วันนี้ผมเพิ่งได้อับเดตตัวใหม่จาก Facebook ที่ทำให้เมื่อมีคนคอมเม้นที่โพสที่ผมเกี่ยวข้อง มันจะมาเด้งเปรียบเสมือน chat ตัวหนึ่ง ซึ่งผมไม่ชอบ และจะปิดมัน และผมคิดว่าหลายๆคนก็น่าจะไม่ชอบมันเช่นกัน ดังนั้นเลยนำวิธีมาบอกครับ

ก่อนอื่นสำหรับคนที่ไม่รู้ว่า Facebook Post Tabs หรือไอ้กล่องคอมเม้นที่ช่องแชทคืออะไร ให้ดูภาพนี้ครับ

ตัวอย่าง facebook post tab

กล่องใหญ่ๆด้านซ้ายนั่นแหละครับ มันจะขึ้นมาทุกครั้งที่มีคอมเม้นที่เกี่ยวข้องกับเราขึ้นมา

วิธีปิด Facebook Post Tabs

  1. ให้กดรูปเฟืองตรงมุมขวาล่างในหน้า Facebook(อยู่ในแถบด้านขวา ตรงกล่องค้นหาคนจะคุยด้วย)
  2. กด Turn Off Post Tabs เท่านี้ ก็จะไม่มีคอมเม้นมาแสดงในแถบแชทอีกต่อไปครับ
    กด Turn Off Post Tabs เพื่อปิดกล่องคอมเม้นที่แถบแชท