การตั้งงบประมาณด้านประสิทธิภาพด้วย Webpack

มิลิกา มิฮาจลิยา

Webpack จะรวมไฟล์ที่นำเข้าทั้งหมดและจัดแพ็กเกจลงในไฟล์เอาต์พุตอย่างน้อย 1 ไฟล์ที่เรียกว่า Bundle การรวมกลุ่มนั้นเป็นระเบียบ แต่เมื่อแอปเติบโตขึ้น แพ็กเกจก็จะเติบโตไปด้วย คุณต้องตรวจสอบขนาด Bundle ว่าจะไม่ขยายจนเกินไปและส่งผลต่อระยะเวลาการโหลดของแอปพลิเคชัน Webpack รองรับการตั้งค่างบประมาณด้านประสิทธิภาพตามขนาดชิ้นงาน และจะคอยตรวจสอบขนาดแพ็กเกจให้คุณ

หากต้องการดูการใช้งานจริง นี่คือแอปที่นับจำนวนวันที่เหลือจนถึงวันปีใหม่ ซึ่งสร้างขึ้นด้วย React และ moment.js (เช่นเดียวกับแอปในชีวิตจริงที่อาศัยเฟรมเวิร์กและไลบรารีมากขึ้นเรื่อยๆ 😉)

แอปที่นับจำนวนวันที่เหลือจนถึงวันขึ้นปีใหม่

วัดระยะทาง

Codelab นี้มีแอปที่มาพร้อมกับ Webpack อยู่แล้ว

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
  2. คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดงขึ้น คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
  3. หากต้องการดูรายการเนื้อหาที่มีการกำหนดสีไว้และขนาดของเนื้อหา ให้พิมพ์ webpack ในคอนโซล
webpack

โดยแพ็กเกจหลักจะไฮไลต์ด้วยสีเหลืองเนื่องจากมีขนาดใหญ่กว่า 244 KiB (250 KB)

เอาต์พุต Webpack แสดงขนาดแพ็กเกจที่ 323 KiB
Webpack ขอเตือนคุณเกี่ยวกับแพ็กเกจ JS ขนาดใหญ่ ⚠️

คำเตือนเหล่านี้จะเปิดใช้โดยค่าเริ่มต้นในโหมดที่ใช้งานจริง และเกณฑ์เริ่มต้นคือ 244 KiB แบบไม่บีบอัดสำหรับทั้งเนื้อหาและจุดแรกเข้า (ชุดค่าผสมของเนื้อหาทั้งหมดที่ใช้ในระหว่างการโหลดหน้าเว็บครั้งแรก)

คําเตือน Webpack ว่าเนื้อหามีขนาดเกินขีดจำกัดที่แนะนำ
Webpack เตือนคุณเกี่ยวกับแพ็กเกจ JS ขนาดใหญ่ ⚠️

Webpack จะไม่เพียงเตือนคุณเท่านั้น แต่ยังให้คําแนะนําเกี่ยวกับวิธีลดขนาดแพ็กเกจด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับเทคนิคที่แนะนำได้ในหลักพื้นฐานในการทำเว็บไซต์

คำแนะนำในการเพิ่มประสิทธิภาพ Webpack
คำแนะนำในการเพิ่มประสิทธิภาพ Webpack 💁

ตั้งงบประมาณประสิทธิภาพที่กำหนดเอง

งบประมาณด้านประสิทธิภาพที่เหมาะสมจะขึ้นอยู่กับลักษณะของโปรเจ็กต์ เราขอแนะนำให้คุณหาข้อมูลด้วยตนเองเสมอ กฎที่ดีคือควรนำส่งทรัพยากรที่บีบอัด/ลดขนาดของเส้นทางวิกฤตให้มีขนาดไม่เกิน 170 KB

สำหรับการสาธิตง่ายๆ นี้ ลองใช้ความระมัดระวังมากขึ้น และตั้งงบประมาณเป็น 100 KB (97.7 KiB) ใน webpack.config.js ให้เพิ่มรายการต่อไปนี้

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

งบประมาณด้านประสิทธิภาพแบบใหม่จะได้รับการกำหนดเป็นไบต์ ดังนี้

  • 100,000 ไบต์สำหรับแต่ละชิ้นงาน (maxAssetSize)
  • 100,000 ไบต์สำหรับจุดแรกเข้า (maxEntrypointSize)

ในกรณีนี้ มีเพียงแพ็กเกจเดียวที่ทำหน้าที่เป็นจุดแรกเข้าด้วย

ค่าที่เป็นไปได้สำหรับคำแนะนำมีดังนี้

  1. warning (ค่าเริ่มต้น): แสดงข้อความเตือนสีเหลือง แต่บิลด์ผ่าน คุณควรใช้ฟีเจอร์นี้ในสภาพแวดล้อมการพัฒนา
  2. error: แสดงข้อความแสดงข้อผิดพลาดสีแดง แต่บิลด์ยังคงผ่านอยู่ เราขอแนะนำให้ใช้การตั้งค่านี้สำหรับบิลด์ที่ใช้งานจริง
  3. false: ไม่แสดงคำเตือนหรือข้อผิดพลาด
ข้อผิดพลาดด้านประสิทธิภาพของ Webpack ในแบบอักษรสีแดง
คำแนะนำเกี่ยวกับประสิทธิภาพของแพ็กเก็ตเป็น "ข้อผิดพลาด" 🚨

เพิ่มประสิทธิภาพ

วัตถุประสงค์ของงบประมาณด้านประสิทธิภาพคือการเตือนคุณเกี่ยวกับปัญหาด้านประสิทธิภาพก่อนที่จะแก้ไขได้ยากเกินไป การสร้างแอปมีมากกว่า 1 วิธีเสมอ และเทคนิคบางอย่างก็จะทำให้โหลดได้เร็วขึ้น (หลายๆ อย่างมีบันทึกอยู่ในการเพิ่มประสิทธิภาพ JavaScript 🤓)

เฟรมเวิร์กและไลบรารีช่วยให้ชีวิตของนักพัฒนาแอปง่ายขึ้น แต่ผู้ใช้ปลายทางไม่ได้ใส่ใจวิธีสร้างแอปเลย เพียงแต่แอปสามารถทำงานได้รวดเร็ว หากคุณรู้สึกว่าใช้จ่ายเกินงบประมาณด้านประสิทธิภาพ ก็ถึงเวลาคิดถึงการเพิ่มประสิทธิภาพที่อาจเป็นไปได้

ในความเป็นจริง กรอบงานขนาดใหญ่ฝั่งไคลเอ็นต์มักจะถอดเปลี่ยนกันได้ยาก ดังนั้นต้องใช้อย่างชาญฉลาด เมื่อศึกษาข้อมูลแล้ว คุณมักจะหาทางเลือกอื่นแทนไลบรารียอดนิยมที่ทำงานได้ดีพอๆ กัน (date-fns เป็นทางเลือกที่ดีสำหรับ moment.js) บางครั้งการไม่ใช้เฟรมเวิร์กหรือไลบรารีเลยเป็นสิ่งที่ดีกว่าหากมีผลกระทบด้านประสิทธิภาพที่สำคัญ

การนำโค้ดที่ไม่ได้ใช้ออกเป็นวิธีที่ดีในการเพิ่มประสิทธิภาพแอปที่มีไลบรารีของบุคคลที่สามขนาดใหญ่ นำคำแนะนำโค้ดที่ไม่ได้ใช้ออกจะอธิบายกระบวนการนี้โดยละเอียด และนี่คือวิธีสั้นๆ ในการเขียนรหัสนับถอยหลังใหม่โดยไม่ต้องใช้ event.js

ใน app/components/Countdown.jsx ให้นำโค้ดต่อไปนี้ออก

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

และลบบรรทัดนี้:

const moment = require('moment');

อาจต้องใช้สูตรคำนวณสักเล็กน้อย แต่คุณใช้การนับถอยหลังเดียวกันนี้กับ Vanilla JavaScript ได้ ดังนี้

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

จากนั้นให้นำ moment.js ออกจาก package.json แล้วเรียกใช้ Webpack ในคอนโซลอีกครั้งเพื่อสร้างแพ็กเกจที่เพิ่มประสิทธิภาพ

นี่ไง! คุณได้โกนหลบไป 223 KiB (230KB) และแอปใช้งบประมาณไม่เกินกำหนด🎉

เอาต์พุตขนาดกลุ่ม Webpack หลังจากการเพิ่มประสิทธิภาพคือ 97.7 KiB

ตรวจสอบ

การตั้งค่างบประมาณด้านประสิทธิภาพใน Webpack ใช้เวลาเพียงโค้ด 2-3 บรรทัด และคุณจะได้รับการแจ้งเตือนหากคุณเพิ่มทรัพยากร Dependency มาก (โดยบังเอิญ) คำพูดดังกล่าว "หลุดสายตาไปจากเดิม" แต่ Webpack จะช่วยให้คุณตระหนักถึงผลกระทบต่อประสิทธิภาพอยู่เสมอ