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

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

Ivan Akulov

Twitter GitHub หน้าแรก

แม้ว่าคุณจะกำหนดค่า Webpack ให้แอปมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ คุณก็ยังต้องติดตามและทราบว่าแอปมีอะไรบ้าง ไม่เช่นนั้น คุณอาจติดตั้งทรัพยากร Dependency ที่จะทำให้แอป มีขนาดใหญ่ขึ้นเป็นสองเท่าโดยที่ไม่ต้องสังเกต

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

ติดตามขนาดของ Bundle

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

หน้าแดชบอร์ดของ Webpack

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() หากคุณใช้เซิร์ฟเวอร์ dev ที่ใช้ Express อยู่

compiler.apply(new DashboardPlugin());

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

ขนาดกลุ่ม

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 หรือพุชโค้ด คุณจะเห็นว่าไฟล์เอาต์พุตมีขนาดเล็กเพียงพอ ดังนี้

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

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

• Alex Russell เกี่ยวกับเวลาที่ใช้ในการโหลดจริงที่เราควรกำหนดเป้าหมาย

วิเคราะห์ว่าเหตุใดแพ็กเกจจึงมีขนาดใหญ่

คุณอาจต้องเจาะลึกลงในแพ็กเกจเพื่อดูว่าโมดูลใดใช้พื้นที่ในแพ็กเกจบ้าง พบกับ webpack-bundle-analyzer

(การบันทึกหน้าจอจาก github.com/webpack-contrib/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 เนื่องจากใกล้เคียงกับขนาดของผู้ใช้จริง โดยใช้แถบด้านข้างทางด้านซ้ายในการเปลี่ยนขนาด

หมายเหตุ: หากคุณใช้ ModuleConcatenationPlugin ระบบอาจรวมบางส่วนของโมดูลในเอาต์พุต Webpack-bundle-analyzer ซึ่งทำให้รายงานมีรายละเอียดน้อยลง หากคุณใช้ปลั๊กอินนี้ ให้ปิดใช้ระหว่างการวิเคราะห์

สิ่งที่ต้องมองหาในรายงานมีดังนี้

• ทรัพยากร 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