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

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

Ivan Akulov

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

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

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

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

webpack-dashboard

webpack-dashboard ช่วยปรับปรุงเอาต์พุตของ webpack ด้วยขนาดของทรัพยากร 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 เป็นการอ้างอิงในการพัฒนาด้วยคำสั่งต่อไปนี้

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

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

หรือในกรณีที่เกิดข้อผิดพลาด ให้ทำดังนี้

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

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

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

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

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

หากต้องการใช้เครื่องมือวิเคราะห์ ให้ติดตั้งแพ็กเกจ 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