javascript - Perf chưa được định nghĩa - chạy ứng dụng react với webpack-dev-server

Tôi đang cố gắng đo hiệu suất của React bằng tiện ích Perf, nhưng khi tôi thử chạy Perf.start() trong bảng điều khiển của mình, tôi nhận được lỗi: Uncaught ReferenceError: Perf is not defined(…)

Đáng nói là, tôi đã cài đặt plugin thông qua npm và có một require('react-addons-perf') trong file main.js của tôi.

Tôi đoán rằng vấn đề này liên quan đến việc tôi đang chạy webpack-dev-server và biến toàn cục không được hiển thị đúng cách, nhưng tiếc là tôi không biết cách tiếp cận đúng. Có ai có thể giúp tôi với vấn đề này không?

Đây là nội dung file webpack.config của tôi trên codepen để tham khảo.

Câu trả lời #1

Tôi không biết liệu có thể có những thay đổi trong webpack.config của bạn có thể thay đổi phạm vi hoặc làm một biến có thể truy cập được thông qua phạm vi toàn cục, nhưng một cách nhanh chóng là đơn giản sử dụng

global.Perf = require('react-addons-perf');

Điều này nên cho bạn quyền truy cập qua bảng điều khiển.

Nhưng phải nói rằng có thể nó không nhằm mục đích phơi bày các biến toàn cục toàn cầu trong requireJS

Và có lẽ hãy thử tìm cách kích hoạt Perf.start() và Perf.stop() từ bên trong mã của bạn, không phải từ bảng điều khiển!

Câu trả lời #2

Tôi đã tìm ra một giải pháp, điều đó đã có hiệu quả với tôi:

1. Cài đặt module npm expose-loader

2. Thêm dòng sau vào cấu hình loaders của webpack của bạn:

   { test: require.resolve("react-addons-perf"), loader: "expose?Perf" }
   

Module expose-loader này là một cách tuyệt vời để đưa các xuất khẩu module ra phạm vi toàn cục.