Wie kann ich den ReactJS-Entwicklungsmodus ein- und ausschalten?

Begann mit der Prop-Validierungsfunktion von ReactJS , die, wie in den Dokumenten angegeben, aus Leistungsgründen nur im Entwicklungsmodus funktioniert.

React scheint die Eigenschaften einer bestimmten Komponente zu validieren, die ich kommentiert habe, aber ich kann mich nicht erinnern, den Entwicklungsmodus explizit aktiviert zu haben.

Ich habe versucht zu suchen, wie der Entwicklungsmodus ausgelöst / umgeschaltet werden kann, hatte aber kein Glück.

Die andere Antwort geht davon aus, dass Sie externe vorgefertigte Dateien von react verwenden, und obwohl dies korrekt ist, werden die meisten Leute React nicht als Paket verwenden oder sollten dies auch tun. Darüber hinaus stützt sich zu diesem Zeitpunkt fast jede React-Bibliothek und jedes React-Paket auf dieselbe Konvention, um Entwicklungshelfer während der Produktion auszuschalten. Wenn Sie nur die minimierte Reaktion verwenden, bleiben auch all diese potenziellen Optimierungen auf dem Tisch.

Letztendlich kommt es auf die Reaktion von React an, Verweise auf die process.env.NODE_ENVgesamte Codebasis einzubetten. Diese wirken wie ein Feature-Toggle.

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

Das Obige ist das häufigste Muster, und andere Bibliotheken folgen ihm ebenfalls. So zu „deaktivieren“ diese Kontrollen müssen wir Umschalten NODE_ENVauf"production"

Der richtige Weg, um den "Dev-Modus" zu deaktivieren, ist über den Bundler Ihrer Wahl.

Webpack

Verwenden Sie die DefinePluginin Ihrer Webpack-Konfiguration wie folgt:

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

Browserify

Verwenden Sie die Envify- Transformation und führen Sie Ihren browserify-Erstellungsschritt mit NODE_ENV=production( "set NODE_ENV=production"unter Windows) aus.

Ergebnis

Dadurch werden Ausgabepakete erstellt, bei denen alle Instanzen process.env.NODE_ENVdurch das Zeichenfolgenliteral ersetzt wurden:"production"

Bonus

Wenn Sie den transformierten Code minimieren, können Sie "Dead Code Elimination" nutzen. DCE ist , wenn die minifier intelligent genug, um zu erkennen , dass: "production" !== "production"ist immer falsch und so wird nur jeder Code in dem Block , wenn entfernen Sie sparen Bytes.

Ja, es ist nicht wirklich gut dokumentiert, aber auf der ReactJS- Downloadseite wird über Entwicklungs- und Produktionsmodi gesprochen:

Wir bieten zwei Versionen von React an: eine unkomprimierte Version für die Entwicklung und eine minimierte Version für die Produktion. Die Entwicklungsversion enthält zusätzliche Warnungen zu häufigen Fehlern, während die Produktionsversion zusätzliche Leistungsoptimierungen enthält und alle Fehlermeldungen entfernt.

Grundsätzlich ist die nicht minimierte Version von React der "Entwicklungs" -Modus und die minimierte Version von React der "Produktions" -Modus.

Um im "Produktions" -Modus zu sein, geben Sie einfach die minimierte Version an react-0.9.0.min.js

Ich habe das woanders gepostet, aber ehrlich gesagt wäre hier ein besserer Ort.

Angenommen, Sie installieren React 15.0.1 mit npm import react from 'react'oder react = require('react')werden ausgeführt, ./mode_modules/react/lib/React.jswas die Rohquelle von React ist.

Die React-Dokumente schlagen vor, dass Sie sie ./mode_modules/react/dist/react.jsfür die Entwicklung und react.min.jsfür die Produktion verwenden.

Wenn Sie die Produktion minimieren /lib/React.jsoder /dist/react.jsfür die Produktion verwenden, zeigt React eine Warnmeldung an, dass Sie den Nichtproduktionscode minimiert haben:

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 verhalten sich ähnlich. Redux zeigt eine Warnmeldung an. Ich glaube, React-Dom auch.

Sie werden daher ausdrücklich aufgefordert, die Produktionsversion von zu verwenden /dist.

Wenn Sie jedoch die /distVersionen minimieren, wird sich das UglifyJsPlugin des Webpacks beschweren.

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

Sie können diese Meldung nicht vermeiden, da UglifyJsPlugin nur Webpack-Chunks ausschließen kann, nicht einzelne Dateien.

Ich benutze sowohl die Entwicklungs- als auch die Produktionsversion /distselbst.

• Webpack hat weniger Arbeit zu erledigen und endet etwas früher. (YRMV)
• React Docs sagen, /dist/react.min.jsist für die Produktion optimiert. Ich habe keinen Beweis dafür gelesen, dass 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify so gute Arbeit leistet wie '/ dist / react.min.js`. Ich habe keinen Beweis gelesen, dass Sie den gleichen resultierenden Code erhalten.
• Ich erhalte 1 Warnmeldung von uglify anstatt 3 vom React / Redux-Ökosystem.

Sie können Webpack die /distVersionen verwenden lassen mit:

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'))
    }
  }

Für Webpack-basierte Builds habe ich separate webpack.config.js für DEV und PROD eingerichtet. Lösen Sie für Prod den Alias ​​wie folgt auf

     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')
    }

Den funktionierenden finden Sie hier

Wenn Sie mit so etwas wie diesem ReactJS.NET / Webpack-Tutorial arbeiten , können Sie process.env nicht verwenden, um den React-Entwicklungsmodus ein- oder auszuschalten, soweit ich das beurteilen kann. Dieses Beispiel enthält einen direkten Link zu react.js (siehe Index.cshtml ). Sie müssen also nur .min.js oder die nicht minimierte Variante auswählen, indem Sie die URL ändern.

Ich bin mir nicht sicher, warum dies der Fall ist, da die Datei webpack.config.js des Beispiels einen Kommentar enthält, der zu implizieren scheint, dass externals: { react: 'React' }der Job erledigt wird , aber dann vorgeht und direkt auf die Seite reagiert.

Für nur Webpack v4 Benutzer:

Wenn Sie mode: productionund mode: developmentin Ihrer Webpack-Konfiguration process.env.NODE_ENVangeben, wird standardmäßig das DefinePlugin verwendet. Kein zusätzlicher Code erforderlich!

webpack.prod.js (aus Dokumenten entnommen)

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

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

Und in unserem JS:

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

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

Ich verwende einen manuellen Erstellungsprozess, der über Webpack ausgeführt wird. Für mich war dies also ein zweistufiger Prozess:

1. Legen Sie die Umgebungsvariable aus package.json mithilfe des Cross-Env-Pakets fest:

   "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. Ändern Sie die Datei webpack.config.js, um die Umgebungsvariable zu verwenden (die an React weitergeleitet wird, um festzustellen, ob wir uns im Entwicklungs- oder Produktionsmodus befinden), und deaktivieren Sie die Minimierung des produzierten Bundles, wenn wir uns im Entwicklungsmodus befinden, damit wir die sehen können tatsächliche Namen unserer Komponenten. Dazu müssen wir die Optimierungseigenschaft von webpack in unserer Datei webpack.config.js verwenden:

   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, node v10.16.14