Come attivare / disattivare la 'modalità di sviluppo' di ReactJS?

Ho iniziato a utilizzare la funzione di convalida delle prop di ReactJS , che come dicono i documenti funziona solo in "modalità di sviluppo" per motivi di prestazioni.

React sembra convalidare le proprietà di un particolare componente che ho annotato, ma non ricordo di aver attivato esplicitamente la "modalità di sviluppo".

Ho provato a cercare come attivare / attivare la modalità di sviluppo, ma non ho avuto fortuna.

L'altra risposta presume che tu stia utilizzando file precostruiti esterni da React , e sebbene sia corretto non è così che la maggior parte delle persone sta per o dovrebbe consumare React come pacchetto. Inoltre, a questo punto la maggior parte delle librerie e dei pacchetti React si basa anche sulla stessa convenzione per disattivare gli helper del tempo di sviluppo durante la produzione. Il solo utilizzo della reazione minimizzata lascerà sul tavolo anche tutte quelle potenziali ottimizzazioni.

Alla fine la magia si riduce a React incorporando riferimenti a process.env.NODE_ENVtutta la base di codice; questi si comportano come un interruttore di funzionalità.

if (process.env.NODE_ENV !== "production")
  // do propType checks

Quello sopra è il modello più comune e anche altre librerie lo seguono. Quindi per "disabilitare" questi controlli dobbiamo passare NODE_ENVa"production"

Il modo corretto per disabilitare la "modalità dev" è tramite il tuo bundler preferito.

webpack

Usa la DefinePluginconfigurazione del tuo webpack in questo modo:

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

Browserify

Usa la trasformazione Envify ed esegui il passaggio di compilazione browserify con NODE_ENV=production( "set NODE_ENV=production"su Windows)

Risultato

Questo produrrà bundle di output che hanno tutte le istanze di process.env.NODE_ENVsostituito con la stringa letterale:"production"

indennità

Quando si minimizza il codice trasformato è possibile trarre vantaggio da "Dead Code Elimination". DCE è quando il minifier è abbastanza intelligente da rendersi conto che: "production" !== "production"è sempre falso e quindi rimuoverà semplicemente qualsiasi codice nel blocco if salvandoti byte.

Sì, non è molto ben documentato, ma nella pagina di download di ReactJS parla delle modalità di sviluppo e produzione:

Forniamo due versioni di React: una versione non compressa per lo sviluppo e una versione ridotta per la produzione. La versione di sviluppo include avvisi aggiuntivi sugli errori comuni, mentre la versione di produzione include ottimizzazioni delle prestazioni aggiuntive e rimuove tutti i messaggi di errore.

Fondamentalmente, la versione non ridotta di React è la modalità "sviluppo" e la versione ridotta di React è la modalità "produzione".

Per essere in modalità "produzione", includi semplicemente la versione ridotta react-0.9.0.min.js

L'ho postato altrove ma, francamente, qui sarebbe un posto migliore.

Supponendo che tu installi React 15.0.1 con npm, import react from 'react'o react = require('react')verrà eseguito ./mode_modules/react/lib/React.jsche è la fonte grezza di React.

I documenti di React suggeriscono di utilizzare ./mode_modules/react/dist/react.jsper lo sviluppo e react.min.jsper la produzione.

Se dovessi minimizzare /lib/React.jso /dist/react.jsper la produzione, React mostrerà un messaggio di avviso che hai minimizzato il codice di non produzione:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

React-dom, Redux, React-Redux si comportano in modo simile. Redux visualizza un messaggio di avviso. Credo che anche React-dom lo faccia.

Quindi sei chiaramente incoraggiato a utilizzare la versione di produzione da /dist.

Tuttavia, se riduci le /distversioni, UglifyJsPlugin di webpack si lamenterà.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

Non puoi evitare questo messaggio perché UglifyJsPlugin può escludere solo blocchi webpack, non singoli file.

Uso personalmente sia la versione di sviluppo che quella di produzione /dist.

• Webpack ha meno lavoro da fare e finisce un po 'prima. (YRMV)
• I documenti di React dicono che /dist/react.min.jsè ottimizzato per la produzione. Non ho letto alcuna prova che 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify faccia un buon lavoro come '/ dist / react.min.js`. Non ho letto alcuna prova che ottieni lo stesso codice risultante.
• Ricevo 1 messaggio di avviso da uglify invece di 3 dall'ecosistema react / redux.

Puoi fare in modo che webpack utilizzi le /distversioni con:

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }

Per la compilazione basata su webpack, ho usato per impostare webpack.config.js separati per DEV e PROD. Per Prod, risolvi l'alias come di seguito

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

Puoi trovare quello funzionante da qui

Se stai lavorando da qualcosa di simile tutorial ReactJS.NET / Webpack , non puoi usare process.env per attivare / disattivare la modalità di sviluppo di React per quanto ne so. Questo esempio collega direttamente a react.js (vedi Index.cshtml ), quindi devi solo scegliere .min.js o la variante non minimizzata cambiando l'URL.

Non sono sicuro del motivo per cui è così, perché il webpack.config.js di esempio ha un commento che sembra implicare externals: { react: 'React' }che farebbe il lavoro, ma poi va avanti e include la reazione direttamente nella pagina.

Per solo gli utenti V4 Webpack:

La specifica mode: productione mode: developmentnella configurazione del Webpack verrà definita process.env.NODE_ENVutilizzando DefinePlugin per impostazione predefinita. Nessun codice aggiuntivo necessario!

webpack.prod.js (tratto da documenti)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

E nel nostro JS:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Documenti Webpack: https://webpack.js.org/guides/production/#specify-the-mode

Uso un processo di compilazione manuale che viene eseguito tramite Webpack, quindi per me è stato un processo in due fasi:

1. Imposta la variabile d'ambiente da package.json usando il pacchetto cross-env:

   "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

2. Modificare il file webpack.config.js per utilizzare la variabile di ambiente (che viene trasmessa a React per determinare se siamo in modalità sviluppo o produzione) e disabilitare la riduzione a icona del pacchetto prodotto se siamo in modalità sviluppo in modo da poter vedere il nomi effettivi dei nostri componenti. Dobbiamo utilizzare la proprietà di ottimizzazione di webpack nel nostro file webpack.config.js per questo:

   optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, cross-env v7.0.0, nodo v10.16.14