ฉันจะดูขนาดของแพ็คเกจ npm ได้อย่างไร

เมื่อฉันค้นหาแพ็คเกจบน NPM ฉันต้องการดูขนาดแพ็คเกจ (เป็น KB หรือ MB เป็นต้น) ดูเหมือนว่า NPM จะไม่แสดงข้อมูลนี้

ฉันจะทราบได้อย่างไรว่าแพ็กเกจ NPM จะเพิ่มลงในโปรเจ็กต์ของฉันมากแค่ไหน

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

มียูทิลิตี้ขนาดเล็กที่ฉันสร้างขึ้นซึ่งจะบอกขนาดขั้นต่ำ + gzipped ของแพ็คเกจหลังจากที่มันเข้าไปในกลุ่มของคุณ -

https://bundlephobia.com

ดูโครงการต้นทุนของโมดูลนี้ เป็นแพ็คเกจ npm ที่จะแสดงขนาดของแพ็กเกจและจำนวนลูก

การติดตั้ง: npm install -g cost-of-modules

การใช้งาน: เรียกใช้cost-of-modulesในไดเร็กทอรีที่คุณกำลังทำงานอยู่

ฉันได้สร้างเครื่องมือขนาดการดาวน์โหลด npmซึ่งตรวจสอบขนาด tarball สำหรับแพ็คเกจ npm ที่กำหนดรวมถึง tarball ทั้งหมดในแผนผังการพึ่งพา สิ่งนี้ช่วยให้คุณทราบถึงต้นทุน (เวลาในการติดตั้งพื้นที่ดิสก์ทรัพยากรรันไทม์การตรวจสอบความปลอดภัย ... ) ของการเพิ่มการอ้างอิงล่วงหน้า

ในภาพด้านบนขนาด Tarballคือ tar.gz ของแพ็คเกจและขนาดรวมคือขนาดของ tarball ทั้งหมด เครื่องมือนี้ค่อนข้างธรรมดา แต่ก็ทำตามที่พูด

เครื่องมือ CLIนอกจากนี้ยังมี คุณสามารถติดตั้งได้ดังนี้:

npm i -g download-size

และใช้มันดังนี้:

$ download-size request
request@2.83.0: 1.08 MiB

รหัสที่มาที่มีอยู่ใน Github: API , เครื่องมือ CLIและลูกค้าเว็บ

ฉันสร้าง Package Phobia เมื่อต้นปีนี้ด้วยความหวังว่าจะได้รับข้อมูลขนาดแพ็คเกจใน npmjs.com และยังติดตามการขยายตัวของแพ็คเกจเมื่อเวลาผ่านไป

https://packagephobia.com

นี้ถูกออกแบบมาเพื่อวัดพื้นที่ดิสก์หลังจากที่คุณเรียกnpm installสำหรับการอ้างอิงด้านเซิร์ฟเวอร์เหมือนexpressหรืออ้างอิง dev jestเช่น

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเครื่องมือนี้และเครื่องมืออื่น ๆ ที่คล้ายคลึงกันได้ใน readme ที่นี่: https://github.com/styfle/packagephobia

อัปเดตปี 2020

"Unpacked Size" (โดยทั่วไปคือขนาดเผยแพร่) มีอยู่บนเว็บไซต์ npmjs.com พร้อมกับ "Total Files" อย่างไรก็ตามนี่ไม่ใช่ความหมายซ้ำซากที่npm installน่าจะใหญ่กว่ามากเนื่องจากแพ็คเกจเดียวน่าจะขึ้นอยู่กับหลายแพ็คเกจ (ดังนั้น Package Phobia ยังคงเกี่ยวข้อง)

นอกจากนี้ยังมีRFC ที่รอดำเนินการสำหรับคุณลักษณะที่พิมพ์ข้อมูลนี้จาก CLI

ในกรณีที่คุณใช้ webpack เนื่องจากโมดูลบันเดิลของคุณให้ดูที่:

• webpack-กำ-วิเคราะห์
• webpack-กำขนาดวิเคราะห์

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

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

พยายามที่จะใช้แพคเกจขนาด

npx package-size vue,vue-router,vuex react,react-dom,react-router,redux

https://github.com/egoist/package-size

หากคุณใช้ Visual Studio รหัสคุณสามารถใช้ส่วนขยายที่เรียกว่านำเข้าต้นทุน

ส่วนขยายนี้จะแสดงขนาดของแพ็กเกจที่นำเข้าในตัวแก้ไข ส่วนขยายใช้ webpack กับ babili-webpack-plugin เพื่อตรวจจับขนาดที่นำเข้า

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

การใช้งาน:

var stats = require("npm-module-stats");

stats.getStats("glob").then((stack) => {

  let dependencies = Object.keys(stack);
  let totalSize = dependencies.reduce((result, key, index) => {
    return result + stack[key].size;
  }, 0);

  console.log('Total Size in Bytes ', totalSize);
  console.log('Total Dependencies ', dependencies.length-1);

}).catch((err) => {
  console.error(err);
});

อาจดูเหมือนเป็นเรื่องเล็กน้อย แต่สามารถแก้ปัญหาที่คุณอธิบายได้อย่างเหมาะสม

วิธีที่ "รวดเร็วและสกปรก" คือใช้ curl และwzrd.inเพื่อดาวน์โหลดแพ็กเกจที่ย่อขนาดอย่างรวดเร็วจากนั้น grep ขนาดไฟล์:

curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length

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

howfatเป็นอีกหนึ่งเครื่องมือที่สามารถแสดงขนาดแพ็คเกจทั้งหมด:

npx howfat jasmine