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

Milica Mihajlija

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

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

วัดระยะทาง

โค้ดแล็บนี้มีแอปที่รวมอยู่ใน webpack อยู่แล้ว

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

webpack

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ใน app/components/Countdown.jsx ให้นําข้อมูลต่อไปนี้ออก

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

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

const moment = require('moment');

ต้องใช้การคำนวณเล็กน้อย แต่คุณใช้การนับถอยหลังแบบเดียวกันกับ 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 ใช้เวลาเพียง 2-3 บรรทัดโค้ด และระบบจะเตือนคุณหากเพิ่มการพึ่งพาขนาดใหญ่ (โดยไม่ตั้งใจ) อย่างที่คนโบราณว่า "ไม่เห็นก็เหมือนไม่มี" แต่ webpack จะช่วยให้คุณทราบถึงผลกระทบด้านประสิทธิภาพได้ตลอดเวลา