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

bookmark_border จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

Milica Mihajlija

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

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

วัดผล

Codelab นี้มีแอปที่รวมกับ 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"
  }
};

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

• 100,000 ไบต์สำหรับชิ้นงานแต่ละรายการ (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 (230 KB) และแอปมีขนาดไม่เกินงบประมาณ 🎉

ตรวจสอบ

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