เครื่องมือที่ต้องใช้ในการติดตามและวิเคราะห์แพ็กเกจ Webpack
แม้ว่าคุณจะกำหนดค่า Webpack เพื่อทำให้แอปมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ คุณก็ยังต้อง ติดตามและรู้ว่ามีแผนอะไรบ้าง มิฉะนั้น คุณสามารถติดตั้งทรัพยากร Dependency ที่จะทำให้ มีขนาดใหญ่เป็น 2 เท่า จนอาจมองไม่เห็นเองเลย!
ส่วนนี้จะอธิบายเครื่องมือที่จะช่วยให้คุณเข้าใจแพ็กเกจของคุณ
ติดตามขนาดแพ็กเกจ
หากต้องการตรวจสอบขนาดแอป ให้ใช้ webpack-dashboard ในระหว่างการพัฒนาและ bundlesize ใน CI
webpack-dashboard
webpack-dashboard เพิ่มประสิทธิภาพเอาต์พุตของ Webpack พร้อมกับขนาดของทรัพยากร Dependency ความคืบหน้า และรายละเอียดอื่นๆ โดยมีลักษณะดังนี้
![ภาพหน้าจอของเอาต์พุตจากแดชบอร์ด Webpack](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=2&hl=th)
แดชบอร์ดนี้จะช่วยติดตามทรัพยากร Dependency ขนาดใหญ่ หากคุณเพิ่มทรัพยากร Dependency ไว้ คุณจะเห็นได้ทันทีใน ส่วนโมดูลได้เลย
หากต้องการเปิดใช้ ให้ติดตั้งแพ็กเกจ webpack-dashboard
ดังนี้
npm install webpack-dashboard --save-dev
และเพิ่มปลั๊กอินลงในส่วน plugins
ของการกำหนดค่า
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
หรือใช้ compiler.apply()
หากคุณใช้เซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์ที่ใช้ Express
compiler.apply(new DashboardPlugin());
ลองใช้แดชบอร์ดเพื่อหาจุดที่น่าจะปรับปรุงให้ดีขึ้นได้ ตัวอย่างเช่น ให้เลื่อนดูส่วนโมดูลเพื่อดูว่าไลบรารีใดมีขนาดใหญ่เกินไปและแทนที่ด้วยรายการได้ ทางเลือกที่เล็กกว่า
Bundlesize
bundlesize ยืนยันว่าเนื้อหา Webpack มีขนาดไม่เกิน ขนาดที่ระบุ ผสานรวมกับ CI เพื่อรับการแจ้งเตือนเมื่อแอปมีขนาดใหญ่เกินไป
![ภาพหน้าจอส่วน CI ของคำขอพุลบน GitHub ระหว่าง
เครื่องมือ CI
จะมีเอาต์พุตแบบ Bundlesize](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=2&hl=th)
วิธีกำหนดค่ามีดังนี้
ดูขนาดสูงสุด
เพิ่มประสิทธิภาพแอปให้เล็กที่สุดเท่าที่จะทำได้ เรียกใช้บิลด์เวอร์ชันที่ใช้งานจริง
เพิ่มส่วน
bundlesize
ลงในpackage.json
ด้วยข้อมูลต่อไปนี้ เนื้อหา:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
ดำเนินการ
bundlesize
ด้วย npx:npx bundlesize
วิธีนี้จะพิมพ์ขนาดของ gzip ของแต่ละไฟล์:
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
เพิ่ม 10-20% ให้กับแต่ละขนาด แล้วคุณจะได้ขนาดสูงสุดที่อนุญาต ส่วนต่าง 10-20% นี้จะทำให้คุณ พัฒนาแอปตามปกติพร้อมเตือนคุณเมื่อแอปมีขนาดใหญ่ขึ้นมากเกินไป
เปิดใช้
bundlesize
ติดตั้งแพ็กเกจ
bundlesize
เป็นทรัพยากร Dependency ในการพัฒนาnpm install bundlesize --save-dev
ในส่วน
bundlesize
ในpackage.json
ให้ระบุคอนกรีต ขนาดสูงสุด สำหรับบางไฟล์ (เช่น รูปภาพ) คุณอาจต้องระบุขนาดสูงสุดต่อไฟล์ ไม่ใช่แต่ละไฟล์ ดังนี้// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
เพิ่มสคริปต์ npm เพื่อเรียกใช้การตรวจสอบ:
// package.json { "scripts": { "check-size": "bundlesize" } }
กำหนดค่า CI เพื่อเรียกใช้
npm run check-size
ในการพุชแต่ละครั้ง (และผสานรวมbundlesize
เข้ากับ GitHub หากคุณกำลังพัฒนาโปรเจ็กต์ดังกล่าว)
เท่านี้ก็เรียบร้อย ทีนี้หากเรียกใช้ npm run check-size
หรือพุชโค้ด คุณจะเห็นว่าไฟล์เอาต์พุต
เล็กพอ:
![ภาพหน้าจอของเอาต์พุต Bundlesize ทุกบิลด์
ผลลัพธ์จะมีคำว่า "ผ่าน"](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=2&hl=th)
หรือหากดำเนินการไม่สำเร็จ ให้ทำดังนี้
![ภาพหน้าจอของเอาต์พุต Bundlesize บางงานสร้าง
ผลลัพธ์จะมีข้อความ 'ไม่ผ่าน'](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=2&hl=th)
อ่านเพิ่มเติม
- อเล็กซ์ รัสเซล เกี่ยวกับเวลาที่ใช้ในการโหลดจริงที่เราควร เป้าหมาย
วิเคราะห์สาเหตุที่แพ็กเกจมีจำนวนมาก
คุณอาจต้องการดูข้อมูลเพิ่มเติมในแพ็กเกจเพื่อดูว่าโมดูลใดใช้พื้นที่ในชุดข้อมูลบ้าง ประชุม webpack-bundle-analyzer:
webpack-bundle-analyzer จะสแกนแพ็กเกจและสร้างภาพสิ่งที่อยู่ภายใน ใช้ร่างคำตอบนี้ การแสดงผลเพื่อค้นหาทรัพยากร Dependency ขนาดใหญ่หรือที่ไม่จำเป็น
หากต้องการใช้เครื่องมือวิเคราะห์ ให้ติดตั้งแพ็กเกจ webpack-bundle-analyzer
npm install webpack-bundle-analyzer --save-dev
เพิ่มปลั๊กอินลงในการกำหนดค่า Webpack ดังนี้
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
และเรียกใช้บิลด์ที่ใช้งานจริง ปลั๊กอินจะเปิดหน้าสถิติในเบราว์เซอร์
โดยค่าเริ่มต้น หน้าสถิติจะแสดงขนาดของไฟล์ที่แยกวิเคราะห์แล้ว (ของไฟล์ตามที่ปรากฏใน กลุ่มนั้น) อาจต้องเปรียบเทียบขนาด gzip เพราะให้ใกล้เคียงกับขนาดที่ผู้ใช้จริงใช้ ประสบการณ์ใหม่ ให้ใช้แถบด้านข้างทางซ้ายเพื่อเปลี่ยนขนาด
ต่อไปนี้คือสิ่งที่ควรพิจารณาในรายงาน
- ทรัพยากร Dependency ขนาดใหญ่ ทำไมถึงมีขนาดใหญ่ มีตัวเลือกอื่นที่น้อยกว่า (เช่น แสดงตัว แทนการใช้รีแอ็กชัน) คุณใช้โค้ดทั้งหมดที่อยู่ในนั้นหรือไม่ (เช่น Moment.js มีภาษาจำนวนมาก ที่มักไม่ค่อยได้ใช้และอาจถูกเลิกใช้งาน)
- ทรัพยากร Dependency ซ้ำ คุณเห็นไลบรารีเดียวกันซ้ำกันในหลายๆ ไฟล์ไหม (การใช้งาน เช่น
ตัวเลือก
optimization.splitChunks.chunks
ใน Webpack 4 หรือCommonsChunkPlugin
– ใน Webpack 3 - เพื่อย้ายไปไว้ในไฟล์ทั่วไป) หรือแพ็กเกจมีหลายเวอร์ชัน จากไลบรารีเดียวกันอย่างไร - ทรัพยากร Dependency ที่คล้ายกัน มีไลบรารีที่คล้ายกันซึ่งทำงานเดียวกันโดยประมาณหรือไม่ (เช่น
moment
และdate-fns
หรือlodash
และlodash-es
) ลองใช้เครื่องมือเดียวแทน
และดูข้อมูลวิเคราะห์ที่ยอดเยี่ยมเกี่ยวกับ Webpack ของ Sean Larkin แพ็กเกจ
สรุป
- ใช้
webpack-dashboard
และbundlesize
เพื่อติดตามขนาดของแอป - เจาะลึกสิ่งที่สร้างขนาดด้วย
webpack-bundle-analyzer