Nghiên cứu trước đây:

Như wiki của webpack đã nói, có thể sử dụng công cụ phân tích để tối ưu hóa hiệu suất xây dựng:

từ: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

Gợi ý từ thống kê bản dựng

Có một công cụ phân tích trực quan hóa bản dựng của bạn và cũng cung cấp một số gợi ý về cách tối ưu hóa kích thước bản dựng và hiệu suất bản dựng .

Bạn có thể tạo tệp JSON cần thiết bằng cách chạy webpack --profile --json> stats.json

Tôi tạo tệp thống kê ( có sẵn tại đây ) tải nó lên công cụ analize của webpack
và trong tab Gợi ý, tôi đã yêu cầu sử dụng prefetchPlugin:

từ: http://webpack.github.io/analyse/#hints

Chuỗi xây dựng mô-đun dài

Sử dụng tìm nạp trước để tăng hiệu suất bản dựng. Tìm nạp trước một mô-đun từ giữa chuỗi .

Tôi đã đào từ trong ra ngoài để tìm tài liệu duy nhất có sẵn trên PrechPlugin là:

từ: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Yêu cầu cho một mô-đun bình thường, được giải quyết và xây dựng ngay cả trước khi một yêu cầu đối với nó xảy ra. Điều này có thể tăng hiệu suất. Trước tiên, hãy cố gắng lập hồ sơ bản dựng để xác định các điểm tìm nạp trước thông minh .

Những câu hỏi của tôi:

• Làm thế nào để sử dụng đúng cách prefetchPlugin?
• Quy trình làm việc phù hợp để sử dụng nó với công cụ Phân tích là gì?
• Làm cách nào để biết liệu prefetchPlugin có hoạt động không? làm thế nào tôi có thể đo lường nó?
• Ý nghĩa của việc Prefetch một module từ giữa chuỗi ?

Tôi thực sự đánh giá cao một số ví dụ

Vui lòng giúp tôi biến câu hỏi này thành tài nguyên có giá trị cho nhà phát triển tiếp theo, những người muốn sử dụng PrechPlugin và các công cụ Phân tích. Cảm ơn bạn.

Vâng, tài liệu plugin tìm nạp trước khá nhiều không tồn tại. Sau khi tự mình tìm ra, nó khá đơn giản để sử dụng và không có nhiều tính linh hoạt đối với nó. Về cơ bản, nó cần hai đối số, ngữ cảnh (tùy chọn) và đường dẫn mô-đun (liên quan đến ngữ cảnh). Bối cảnh trong trường hợp của bạn sẽ /absolute/path/to/your/project/node_modules/react-transform-har/giả định rằng dấu ngã trong ảnh chụp màn hình của bạn đang đề cập đến node_modulestheo độ phân giải node_module của webpack .

Mô-đun tìm nạp trước thực tế nên lý tưởng không quá ba phần phụ thuộc mô-đun. Vì vậy, trong trường hợp của bạn isFunction.jslà mô-đun có chuỗi xây dựng dài và lý tưởng là mô-đun này nên được tìm nạp trước tạigetNative.js

Tuy nhiên, tôi nghi ngờ có điều gì đó khó hiểu trong cấu hình của bạn, bởi vì các phụ thuộc chuỗi xây dựng của bạn đang đề cập đến các phụ thuộc mô-đun, sẽ được tối ưu hóa tự động bằng webpack. Tôi không chắc làm thế nào bạn có được điều đó, nhưng trong trường hợp của chúng tôi, chúng tôi không thấy bất kỳ cảnh báo nào về chuỗi xây dựng dài trong node_modules. Hầu hết các chuỗi xây dựng dài của chúng tôi là do các thành phần phản ứng lồng nhau sâu, đòi hỏi phải có scss. I E:

Bất kể, bạn sẽ muốn thêm một plugin mới cho mỗi cảnh báo, như sau:

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

Đối số thứ hai phải là một chuỗi đến vị trí tương đối của mô-đun. Hy vọng điều này có ý nghĩa.

Phần giữa của chuỗi của bạn có thể ở đó react-transform-hmr/index.jskhi nó bắt đầu được một nửa. Bạn có thể thử PrefetchPlugin('react-transform-hmr/index')và chạy lại hồ sơ của mình để xem nó có giúp tăng tốc tổng thời gian xây dựng của bạn hay không.