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.
process.env
für Webpack-Benutzer: stackoverflow.com/questions/37311972/…Antworten:
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_ENV
gesamte Codebasis einzubetten. Diese wirken wie ein Feature-Toggle.Das Obige ist das häufigste Muster, und andere Bibliotheken folgen ihm ebenfalls. So zu „deaktivieren“ diese Kontrollen müssen wir Umschalten
NODE_ENV
auf"production"
Der richtige Weg, um den "Dev-Modus" zu deaktivieren, ist über den Bundler Ihrer Wahl.
Webpack
Verwenden Sie die
DefinePlugin
in Ihrer Webpack-Konfiguration wie folgt: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_ENV
durch 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.quelle
'"production"'
dh sein. doppelt zitiert, stringify erledigt das für SieJSON.stringify(process.env.NODE_ENV)
damit es überNODE_ENV=production webpack ...
die Befehlszeile umgeschaltet werden kann . Bonus des expliziten Codes hinzugefügt =)DefinePlugin
Verwendung durchnew webpack.EnvironmentPlugin(['NODE_ENV'])
Ja, es ist nicht wirklich gut dokumentiert, aber auf der ReactJS- Downloadseite wird über Entwicklungs- und Produktionsmodi gesprochen:
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
quelle
npm
direkt aus dem Reaktionspaket erstellen, verwenden Sie soemthing wie envify, umNODE_ENV = 'production'
die gleichen Überprüfungen durchzuführen . @EdwardMSmith Lassen Sie mich wissen, wo Sie diese Informationen sehen wollten und ich kann sie hinzufügen (oder Sie können einfach eine PR einreichen)!NODE_ENV
oben vorhanden sein sollte.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'
oderreact = require('react')
werden ausgeführt,./mode_modules/react/lib/React.js
was die Rohquelle von React ist.Die React-Dokumente schlagen vor, dass Sie sie
./mode_modules/react/dist/react.js
für die Entwicklung undreact.min.js
für die Produktion verwenden.Wenn Sie die Produktion minimieren
/lib/React.js
oder/dist/react.js
fü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
/dist
Versionen 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
/dist
selbst./dist/react.min.js
ist 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.Sie können Webpack die
/dist
Versionen verwenden lassen mit:quelle
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
Den funktionierenden finden Sie hier
quelle
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.quelle
Für nur Webpack v4 Benutzer:
Wenn Sie
mode: production
undmode: development
in Ihrer Webpack-Konfigurationprocess.env.NODE_ENV
angeben, wird standardmäßig das DefinePlugin verwendet. Kein zusätzlicher Code erforderlich!webpack.prod.js (aus Dokumenten entnommen)
Und in unserem JS:
Webpack-Dokumente: https://webpack.js.org/guides/production/#specify-the-mode
quelle
Ich verwende einen manuellen Erstellungsprozess, der über Webpack ausgeführt wird. Für mich war dies also ein zweistufiger Prozess:
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" }
Ä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
quelle