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