ตรวจสอบและวิเคราะห์แอป

เครื่องมือที่ต้องใช้ในการติดตามและวิเคราะห์แพ็กเกจ Webpack

Ivan Akulov

แม้ว่าคุณจะกำหนดค่า Webpack เพื่อทำให้แอปมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ คุณก็ยังต้อง ติดตามและรู้ว่ามีแผนอะไรบ้าง มิฉะนั้น คุณสามารถติดตั้งทรัพยากร Dependency ที่จะทำให้ มีขนาดใหญ่เป็น 2 เท่า จนอาจมองไม่เห็นเองเลย!

ส่วนนี้จะอธิบายเครื่องมือที่จะช่วยให้คุณเข้าใจแพ็กเกจของคุณ

ติดตามขนาดแพ็กเกจ

หากต้องการตรวจสอบขนาดแอป ให้ใช้ webpack-dashboard ในระหว่างการพัฒนาและ bundlesize ใน CI

webpack-dashboard

webpack-dashboard เพิ่มประสิทธิภาพเอาต์พุตของ Webpack พร้อมกับขนาดของทรัพยากร Dependency ความคืบหน้า และรายละเอียดอื่นๆ โดยมีลักษณะดังนี้

แดชบอร์ดนี้จะช่วยติดตามทรัพยากร 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 เพื่อรับการแจ้งเตือนเมื่อแอปมีขนาดใหญ่เกินไป

วิธีกำหนดค่ามีดังนี้

ดูขนาดสูงสุด

1. เพิ่มประสิทธิภาพแอปให้เล็กที่สุดเท่าที่จะทำได้ เรียกใช้บิลด์เวอร์ชันที่ใช้งานจริง

2. เพิ่มส่วน bundlesize ลงใน package.json ด้วยข้อมูลต่อไปนี้ เนื้อหา:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. ดำเนินการ 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
   

4. เพิ่ม 10-20% ให้กับแต่ละขนาด แล้วคุณจะได้ขนาดสูงสุดที่อนุญาต ส่วนต่าง 10-20% นี้จะทำให้คุณ พัฒนาแอปตามปกติพร้อมเตือนคุณเมื่อแอปมีขนาดใหญ่ขึ้นมากเกินไป

   เปิดใช้ bundlesize

5. ติดตั้งแพ็กเกจ bundlesize เป็นทรัพยากร Dependency ในการพัฒนา

   npm install bundlesize --save-dev
   

6. ในส่วน 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",
       }
     ]
   }   
   

7. เพิ่มสคริปต์ npm เพื่อเรียกใช้การตรวจสอบ:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. กำหนดค่า CI เพื่อเรียกใช้ npm run check-size ในการพุชแต่ละครั้ง (และผสานรวม bundlesize เข้ากับ GitHub หากคุณกำลังพัฒนาโปรเจ็กต์ดังกล่าว)

เท่านี้ก็เรียบร้อย ทีนี้หากเรียกใช้ npm run check-size หรือพุชโค้ด คุณจะเห็นว่าไฟล์เอาต์พุต เล็กพอ:

หรือหากดำเนินการไม่สำเร็จ ให้ทำดังนี้

อ่านเพิ่มเติม

• อเล็กซ์ รัสเซล เกี่ยวกับเวลาที่ใช้ในการโหลดจริงที่เราควร เป้าหมาย

วิเคราะห์สาเหตุที่แพ็กเกจมีจำนวนมาก

คุณอาจต้องการดูข้อมูลเพิ่มเติมในแพ็กเกจเพื่อดูว่าโมดูลใดใช้พื้นที่ในชุดข้อมูลบ้าง ประชุม 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