เปิด Brotli Compression ใช้กับ Nuxt.js
ถ้า Nuxt.js ทำไฟล์ .js เป็น Gzip แล้วมันยังใหญ่ไป งั้นเราเปลี่ยนไปใช้ Brotli แทนก็แล้วกันครับ
สวัสดีครับ สำหรับเนื้อหาใน Blog นี้ จะเป็นวิธีการเปิดใช้งาน ให้ Nuxt.js ใช้งาน Brotli compression แทน Gzip compression ครับ
Brotli compression คืออะไร
Brotli คือ Compression algorithm ที่ Google พัฒนาขึ้น และเปิดตัวมาตั้งแต่ปี 2015 ในปัจจุบัน Web browser ส่วนใหญ่ ก็รองรับ Brotli แล้วครับ
แล้ว Brotli ดีกว่า Gzip ขนาดไหน
อ้างอิงจาก https://expeditedsecurity.com/blog/nginx-brotli/ ต้นทางได้ให้ข้อมูลไว้ว่า เมื่อเทียบกันระหว่าง Brotli กับ Gzip พบว่า
- ไฟล์ Javascript จะมีขนาดเล็กกว่า 14%
- ไฟล์ HTMLจะมีขนาดเล็กกว่า 21%
- ไฟล์ CSS จะมีขนาดเล็กกว่า 17%
ของดี ไม่ต้องขายเยอะ ก็ยังเป็นของดี
ใช้กับ Nuxt.js ยังไง
ขั้นแรกครับ ให้เพิ่ม Package shrink-ray-current เข้าโปรเจ็คก่อนนะครับ
npm i shrink-ray-currentจากนั้น ไปปรับไฟล์ nuxt.config.js อีกนิดหน่อยครับ
nuxt.config.jsimport shrinkRay from 'shrink-ray-current'
export default {
...
render: {
compressor: shrinkRay()
},
...
}
จากนั้นให้รันตัว Nuxt.js ในโหมด Production นะครับ
npm run build && npm run startเปิดใช้ Brotli แล้ว ได้ผลอย่างไร
เปรียบเทียบระหว่าง Gzip กับ Brotli
ในการเปรียบเทียบนี้ ผมจะสร้าง Nuxt.js โปรเจ็คขึ้นมาใหม่ และไม่ได้เพิ่มอะไรลงไป นอกจาก Package shrink-ray-current นะครับ
เริ่มจากก่อนจะเปิดใช้ Brotli ก่อนนะครับ (ก็คือเป็น Gzip ธรรมดา) มี Data Transfer ทั้งสิ้น 91.8 KB
ต่อมาคือหลังจากเปิดใช้ Brotli แล้วครับ มี Data Transfer ทั้งสิ้น 80 KB
และสุดท้ายครับ แถมให้พิเศษ คือ เปิดใช้ Brotli และยัง Build แบบ Modern ด้วยครับ มี Data Transfer ทั้งสิ้น 73.4 KB
สรุปความแตกต่าง
Gzip compression 91.8 KB
Brotli compression 80 KB
Brotli compression + Modern mode 73.4 KB
Data Transfer ลดลงไปตั้ง 18.4 KB หรือคิดเป็นประมาณ 20% เมื่อเทียบกันระหว่าง Gzip compression กับ Brotli compression + Modern mode ครับ
ก็อย่างที่บอกครับ ของดี ไม่ต้องขายเยอะ ก็ยังเป็นของดี
