เครื่องมือที่จะใช้ติดตามและวิเคราะห์แพ็กเกจ Webpack
แม้ว่าคุณจะกำหนดค่า Webpack ให้แอปมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ คุณก็ยังต้องติดตามและทราบว่าแอปมีอะไรบ้าง ไม่เช่นนั้น คุณอาจติดตั้งทรัพยากร Dependency ที่จะทำให้แอป มีขนาดใหญ่ขึ้นเป็นสองเท่าโดยที่ไม่ต้องสังเกต
ส่วนนี้จะอธิบายถึงเครื่องมือที่จะช่วยให้คุณเข้าใจเกี่ยวกับแพ็กเกจ
ติดตามขนาดของ Bundle
หากต้องการตรวจสอบขนาดแอป ให้ใช้ webpack-dashboard ในระหว่างการพัฒนาและ bundlesize ใน CI
หน้าแดชบอร์ดของ Webpack
webpack-dashboard ช่วยปรับปรุงเอาต์พุตของ Webpack ด้วยขนาดของทรัพยากร Dependency ความคืบหน้า และรายละเอียดอื่นๆ โดยมีลักษณะดังนี้
![ภาพหน้าจอของเอาต์พุตหน้าแดชบอร์ด Webpack](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=5&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()
หากคุณใช้เซิร์ฟเวอร์ dev ที่ใช้ Express อยู่
compiler.apply(new DashboardPlugin());
คุณสามารถลองใช้แดชบอร์ดเพื่อหาจุดที่น่าจะปรับปรุงให้ดีขึ้นได้ ตัวอย่างเช่น เลื่อนดูส่วนโมดูลเพื่อค้นหาไลบรารีที่มีขนาดใหญ่เกินไปและแทนที่ด้วยไลบรารีสำรองได้
ขนาดกลุ่ม
bundlesize จะยืนยันว่าเนื้อหา Webpack มีขนาดไม่เกินขนาดที่ระบุ ผสานรวมแอปกับ CI เพื่อรับการแจ้งเตือนเมื่อแอปมีขนาดใหญ่เกินไป
![ภาพหน้าจอของส่วน CI ของคำขอพุลบน GitHub ในการใช้เครื่องมือ CI จะมีเอาต์พุต Bundlesize](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=5&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=5&hl=th)
หรือในกรณีที่ดำเนินการไม่สำเร็จ ให้ดำเนินการดังนี้
![ภาพหน้าจอของเอาต์พุต Bundlesize ผลลัพธ์ของบิลด์บางรายการจะมีเครื่องหมาย "ไม่ผ่าน"](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=5&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 เพื่อย้ายไปยังไฟล์ทั่วไป) หรือ Bundle ดังกล่าวมีไลบรารี เดียวกันหลายเวอร์ชัน - ทรัพยากร Dependency ที่คล้ายกัน มีไลบรารีที่คล้ายกันซึ่งทำงานเดียวกันโดยประมาณหรือไม่ (เช่น
moment
และdate-fns
หรือlodash
และlodash-es
) ลองใช้เครื่องมือเดียวต่อไป
และดูการวิเคราะห์แพ็กเกจ Webpack ของ Sean Larkin ที่ยอดเยี่ยม
สรุป
- ใช้
webpack-dashboard
และbundlesize
เพื่อติดตามขนาดของแอป - เจาะลึกสิ่งที่สร้างขึ้นในขนาดด้วย
webpack-bundle-analyzer