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

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

Ivan Akulov

แม้ว่าคุณจะกำหนดค่า webpack เพื่อให้แอปมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ แต่คุณก็ควรติดตามและดูว่ามีอะไรอยู่ใน 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
   

   ซึ่งจะแสดงขนาดไฟล์ที่บีบอัดแล้วของแต่ละไฟล์

   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 เป็นการอ้างอิงสำหรับการพัฒนา

   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 หากคุณพัฒนาโปรเจ็กต์ใน bundlesize)

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

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

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

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

วิเคราะห์สาเหตุที่ App Bundle มีขนาดใหญ่

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

webpack-bundle-analyzer จะสแกนแพ็กเกจและสร้างภาพสิ่งที่อยู่ภายใน ใช้การแสดงภาพนี้เพื่อค้นหาการพึ่งพาขนาดใหญ่หรือไม่จำเป็น

หากต้องการใช้เครื่องมือวิเคราะห์ ให้ติดตั้งแพ็กเกจ 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 ขนาดใหญ่ เหตุใดจึงมีขนาดใหญ่มาก มีตัวเลือกอื่นที่น้อยกว่า (เช่น Preact แทน React) คุณใช้โค้ดทั้งหมดที่มีให้ไหม (เช่น Moment.js มีภาษาจำนวนมาก ซึ่งมักไม่ได้ใช้และอาจยกเลิกได้)
• การขึ้นต่อกันที่ซ้ำกัน คุณเห็นคลังเดียวกันซ้ำๆ ในหลายไฟล์ไหม (เช่น ใช้ตัวเลือก optimization.splitChunks.chunks ใน webpack 4 หรือ CommonsChunkPlugin ใน webpack 3 เพื่อย้ายไปยังไฟล์ทั่วไป) หรือแพ็กเกจมีหลายเวอร์ชัน ของไลบรารีเดียวกัน
• การพึ่งพาที่คล้ายกัน มีไลบรารีที่คล้ายกันซึ่งทํางานแบบเดียวกันหรือไม่ (เช่น moment และ date-fns หรือ lodash และ lodash-es) ลองใช้เครื่องมือเดียวแทน

และดูข้อมูลวิเคราะห์ที่ยอดเยี่ยมเกี่ยวกับแพ็กเกจ Webpack ของ Sean Larkin

สรุป

• ใช้ webpack-dashboard และ bundlesize เพื่อติดตามขนาดของแอป
• เจาะลึกสิ่งที่ทำให้ไฟล์มีขนาดใหญ่ขึ้นด้วย webpack-bundle-analyzer