Webpack จะรวมไฟล์ที่นำเข้าทั้งหมดและจัดแพ็กเกจลงในไฟล์เอาต์พุตอย่างน้อย 1 ไฟล์ที่เรียกว่า Bundle การรวมกลุ่มนั้นเป็นระเบียบ แต่เมื่อแอปเติบโตขึ้น แพ็กเกจก็จะเติบโตไปด้วย คุณต้องตรวจสอบขนาด Bundle ว่าจะไม่ขยายจนเกินไปและส่งผลต่อระยะเวลาการโหลดของแอปพลิเคชัน Webpack รองรับการตั้งค่างบประมาณด้านประสิทธิภาพตามขนาดชิ้นงาน และจะคอยตรวจสอบขนาดแพ็กเกจให้คุณ
หากต้องการดูการใช้งานจริง นี่คือแอปที่นับจำนวนวันที่เหลือจนถึงวันปีใหม่ ซึ่งสร้างขึ้นด้วย React และ moment.js (เช่นเดียวกับแอปในชีวิตจริงที่อาศัยเฟรมเวิร์กและไลบรารีมากขึ้นเรื่อยๆ 😉)
วัดระยะทาง
Codelab นี้มีแอปที่มาพร้อมกับ Webpack อยู่แล้ว
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดงขึ้น คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
- หากต้องการดูรายการเนื้อหาที่มีการกำหนดสีไว้และขนาดของเนื้อหา ให้พิมพ์
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"
}
};
งบประมาณด้านประสิทธิภาพแบบใหม่จะได้รับการกำหนดเป็นไบต์ ดังนี้
- 100,000 ไบต์สำหรับแต่ละชิ้นงาน (maxAssetSize)
- 100,000 ไบต์สำหรับจุดแรกเข้า (maxEntrypointSize)
ในกรณีนี้ มีเพียงแพ็กเกจเดียวที่ทำหน้าที่เป็นจุดแรกเข้าด้วย
ค่าที่เป็นไปได้สำหรับคำแนะนำมีดังนี้
warning
(ค่าเริ่มต้น): แสดงข้อความเตือนสีเหลือง แต่บิลด์ผ่าน คุณควรใช้ฟีเจอร์นี้ในสภาพแวดล้อมการพัฒนาerror
: แสดงข้อความแสดงข้อผิดพลาดสีแดง แต่บิลด์ยังคงผ่านอยู่ เราขอแนะนำให้ใช้การตั้งค่านี้สำหรับบิลด์ที่ใช้งานจริงfalse
: ไม่แสดงคำเตือนหรือข้อผิดพลาด
เพิ่มประสิทธิภาพ
วัตถุประสงค์ของงบประมาณด้านประสิทธิภาพคือการเตือนคุณเกี่ยวกับปัญหาด้านประสิทธิภาพก่อนที่จะแก้ไขได้ยากเกินไป การสร้างแอปมีมากกว่า 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 ใช้เวลาเพียงโค้ด 2-3 บรรทัด และคุณจะได้รับการแจ้งเตือนหากคุณเพิ่มทรัพยากร Dependency มาก (โดยบังเอิญ) คำพูดดังกล่าว "หลุดสายตาไปจากเดิม" แต่ Webpack จะช่วยให้คุณตระหนักถึงผลกระทบต่อประสิทธิภาพอยู่เสมอ