React perf stampa sempre vuoto Array

Question

Sto provando a testare le prestazioni della mia app utilizzando gli strumenti perf perf. Il problema è che non funziona. chiamo

Perf.start() 

Perf.stop() 

Perf.printWasted() 

nella console, che funziona (nessun errore di console o avvisi), ma printWasted() restituisce sempre Array vuoto e un messaggio

Tempo totale: 0.00 ms

Questo succede anche per altre funzioni come printInclusive() e printExclusive() Quale può essere il problema? P.S Sto usando react-router, come si comporta perf perf con quello? Forse sta causando alcuni problemi? Inoltre, process.env.NODE_ENV non è impostato su produzione, e sto usando React 0.13.3

Answer 1

Stavo avendo lo stesso problema come descritto qui - nel mio caso è stato un errore stupido, però. È possibile che tu (o qualcun altro in futuro) abbia commesso lo stesso stupido errore, quindi ho pensato di spiegare quello che ho fatto.

stavo scrivendo un codice di prova in cui ho caricato la libreria Reagire direttamente nella pagina -

<script src="/Script/ThirdParty/react-15.0.0.js"></script> 
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script> 

Quando ho voluto ottenere informazioni su come la pagina è stata eseguendo, ho anche caricato lo script "addons" -

<script src="/Script/ThirdParty/react-15.0.0.js"></script> 
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script> 
<script src="/Script/ThirdParty/react-with-addons-15.0.0.js"></script> 

Poi rinfrescato pagina, è andato alla console e tipizzato

React.addons.Perf.start() 

ho interagito con la pagina in modo che una ri-renderizzare verificato e quindi digitato

React.addons.Perf.stop() 
React.addons.Perf.printWasted() 

e ho sempre avuto

Array [0]

Totale tempo: 0,0 ms

L'errore era che lo script dei componenti aggiuntivi non doveva essere caricato in aggiunta allo allo script di React primario, dovrebbe essere eseguito d invece - es.

<script src="/Script/ThirdParty/react-with-addons-15.0.0.js"></script> 
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script> 

Dopo aver corretto ciò, ho iniziato a ottenere risultati dai metodi di strumento perf.

Answer 2

ho incappato lo stesso problema quando si utilizza webpack's extarnals come suggerito in questo Avvio rapido: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

// webpack.conf.js: 
//... 
externals: { 
    "react": "React", 
    "react-dom": "ReactDOM" 
} 

con

// index.js 
// ... 
window.Perf = require('react-addons-perf') 

e

// index.html 
<script src="/js/react/dist/react.js"></script> 
<script src="/js/react-dom/dist/react-dom.js"></script> 
<script src="/js/bundle.js" charset="UTF-8"></script> 

Risulta questa configurazione anche causa i risultati Perf ad alwa ss essere vuoto. La rimozione della voce externals (e quindi di aver reagito all'interno del pacchetto del pacchetto Web) ha risolto il problema. Si è scoperto che non c'era alcuna differenza di prestazioni nel tempo di costruzione.