การวิจัยก่อนหน้านี้:

ตามที่ wiki ของ webpack กล่าวไว้คุณสามารถใช้เครื่องมือวิเคราะห์เพื่อเพิ่มประสิทธิภาพการสร้าง:

จาก: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

คำแนะนำจากการสร้างสถิติ

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

คุณสามารถสร้างไฟล์ JSON ที่ต้องการได้โดยเรียกใช้ webpack --profile --json> stats.json

ฉันสร้างไฟล์สถิติ ( มีให้ที่นี่ ) อัปโหลดไปยังเครื่องมือวิเคราะห์ของ webpack
และภายใต้แท็บคำแนะนำฉันบอกให้ใช้ prefetchPlugin:

จาก: http://webpack.github.io/analyse/#hints

โมดูลยาวสร้างโซ่

ใช้การดึงข้อมูลล่วงหน้าเพื่อเพิ่มประสิทธิภาพการสร้าง prefetch โมดูลจากตรงกลางของห่วงโซ่

ฉันขุดเว็บจากภายนอกเพื่อค้นหาเอกสารที่มีอยู่ใน prefechPlugin คือ:

จาก: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

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

คำถามของฉัน:

• วิธีใช้ prefetchPlugin อย่างถูกต้อง?
• ขั้นตอนการทำงานที่เหมาะสมที่จะใช้กับเครื่องมือวิเคราะห์คืออะไร
• ฉันจะรู้ได้อย่างไรว่า prefetchPlugin ทำงานได้หรือไม่ ฉันจะวัดได้อย่างไร?
• การดึงโมดูลจากตรงกลางของโซ่หมายความว่าอย่างไร

ฉันจะขอบคุณตัวอย่างบางส่วน

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

ใช่เอกสารประกอบปลั๊กอินก่อนการดึงข้อมูลค่อนข้างไม่มีอยู่จริง หลังจากหาข้อมูลด้วยตัวเองแล้วมันค่อนข้างใช้งานง่ายและไม่มีความยืดหยุ่นมากนัก โดยทั่วไปจะใช้สองอาร์กิวเมนต์บริบท (ทางเลือก) และเส้นทางโมดูล (สัมพันธ์กับบริบท) บริบทในกรณีของคุณจะได้รับการ/absolute/path/to/your/project/node_modules/react-transform-har/สมมติว่าตัวหนอนในภาพของคุณจะหมายถึงnode_modulesเป็นต่อ webpack ของความละเอียด node_module

โมดูลการดึงข้อมูลล่วงหน้าที่แท้จริงควรมีความลึกไม่เกินสามการอ้างอิงโมดูล ดังนั้นในกรณีของคุณisFunction.jsคือโมดูลที่มีห่วงโซ่การสร้างแบบยาวและควรดึงข้อมูลไว้ล่วงหน้าที่getNative.js

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

ไม่ว่าคุณจะต้องการเพิ่มปลั๊กอินใหม่สำหรับคำเตือนแต่ละคำดังนี้:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

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

ตรงกลางของโซ่ของคุณอาจreact-transform-hmr/index.jsเป็นเพราะมันเริ่มมาได้ครึ่งทาง คุณสามารถลองPrefetchPlugin('react-transform-hmr/index')เรียกใช้โปรไฟล์ของคุณใหม่เพื่อดูว่าจะช่วยเร่งเวลาในการสร้างได้เร็วขึ้นหรือไม่