Jak włączyć / wyłączyć tryb programowania w ReactJS?

Zaczęto używać funkcji sprawdzania poprawności właściwości ReactJS , która, jak mówią dokumenty, działa tylko w „trybie programistycznym” ze względu na wydajność.

Wydaje się, że React sprawdza właściwości konkretnego komponentu, o którym pisałem, ale nie pamiętam, żebym jawnie włączał „tryb programowania”.

Próbowałem znaleźć sposób wyzwalania / przełączania trybu programowania, ale nie miałem szczęścia.

Druga odpowiedź zakłada, że ​​używasz zewnętrznych, gotowych plików z firmy React i chociaż jest to poprawne, większość ludzi nie zamierza lub powinna korzystać z Reacta jako pakietu. Co więcej, w tym momencie większość bibliotek i pakietów React również korzysta z tej samej konwencji wyłączania pomocników dev time podczas produkcji. Samo użycie zminimalizowanej reakcji pozostawi wszystkie te potencjalne optymalizacje również na stole.

Ostatecznie magia sprowadza się do osadzania odniesień do process.env.NODE_ENVReacta w całej bazie kodu; te działają jak przełącznik funkcji.

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

Powyższy wzorzec jest najbardziej rozpowszechniony, podobnie jak inne biblioteki. Więc do „Wyłącz” tych kontroli musimy przełączać NODE_ENVsię"production"

Właściwym sposobem wyłączenia „trybu deweloperskiego” jest skorzystanie z wybranego pakietu.

webpack

Użyj DefinePluginw konfiguracji swojego webpacka w następujący sposób:

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

Browserify

Użyj transformacji Envify i uruchom krok kompilacji browserify z NODE_ENV=production( "set NODE_ENV=production"w systemie Windows)

Wynik

Spowoduje to utworzenie pakunków wyjściowych, w których wszystkie wystąpienia process.env.NODE_ENVzastąpiono literałem ciągu:"production"

Premia

Podczas minimalizacji przekształconego kodu można skorzystać z „Eliminacji martwego kodu”. DCE występuje wtedy, gdy minifier jest wystarczająco inteligentny, aby zdać sobie sprawę, że: "production" !== "production"jest zawsze fałszywy, a więc po prostu usunie dowolny kod w bloku if, oszczędzając bajty.

Tak, nie jest to dobrze udokumentowane, ale na stronie pobierania ReactJS mówi o trybach rozwoju i produkcji:

Udostępniamy dwie wersje Reacta: nieskompresowaną wersję do programowania i zminimalizowaną wersję do produkcji. Wersja rozwojowa zawiera dodatkowe ostrzeżenia o typowych błędach, podczas gdy wersja produkcyjna zawiera dodatkowe optymalizacje wydajności i usuwa wszystkie komunikaty o błędach.

Zasadniczo niezminifikowana wersja Reacta jest w trybie „programistycznym”, a zminimalizowana wersja Reacta w trybie „produkcyjnym”.

Aby być w trybie „produkcyjnym”, wystarczy dołączyć wersję zminimalizowaną react-0.9.0.min.js

Opublikowałem to gdzie indziej, ale szczerze mówiąc, tutaj byłoby lepsze miejsce.

Zakładając, że zainstalujesz React 15.0.1 z npm, import react from 'react'lub react = require('react')uruchomisz, ./mode_modules/react/lib/React.jsktóry jest surowym źródłem Reacta .

Dokumentacja React sugeruje użycie ./mode_modules/react/dist/react.jsdo rozwoju i react.min.jsprodukcji.

Powinieneś zminimalizować /lib/React.js lub /dist/react.jsuruchomisz produkcyjną, React wyświetli ostrzeżenie, że zminimalizowałeś kod nieprodukcyjny:

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, reag-redux zachowują się podobnie. Redux wyświetla komunikat ostrzegawczy. Uważam, że reakcja też.

Dlatego wyraźnie zachęcamy do korzystania z wersji produkcyjnej z /dist.

Jeśli jednak zminimalizujesz plik /dist zminimalizujesz wersje, UglifyJsPlugin z webpacka będzie narzekać.

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

Nie możesz uniknąć tego komunikatu, ponieważ UglifyJsPlugin może wykluczać tylko fragmenty pakietu webpack, a nie pojedyncze pliki.

Sam korzystam z wersji rozwojowej i produkcyjnej /dist.

• Webpack ma mniej pracy i kończy się nieco wcześniej. (YRMV)
• Dokumentacja React twierdzi, że /dist/react.min.jsjest zoptymalizowana pod kątem produkcji. Nie przeczytałem żadnego dowodu na to'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify działa tak dobrze jak "/ dist / reaguj.min.js". Nie przeczytałem żadnego dowodu, że otrzymujesz ten sam wynikowy kod.
• Dostaję 1 wiadomość ostrzegawczą od uglify zamiast 3 z ekosystemu reaguj / redux.

Możesz użyć webpacka do korzystania z /distwersji z:

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

W przypadku kompilacji opartej na pakiecie webpack skonfigurowałem osobny plik webpack.config.js dla DEV i PROD. W przypadku Prod rozwiąż alias jak poniżej

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

Możesz znaleźć działający tutaj

Jeśli pracujesz z czegoś takiego, jak ten samouczek dotyczący ReactJS.NET / Webpack , nie możesz używać process.env do włączania / wyłączania trybu programowania React, o ile wiem. Ten przykład łączy bezpośrednio zreak.js (patrz Index.cshtml ), więc wystarczy wybrać plik .min.js lub niezminifikowany wariant, zmieniając adres URL.

Nie jestem pewien, dlaczego tak jest, ponieważ plik webpack.config.js próbki zawiera komentarz, który wydaje się sugerować, externals: { react: 'React' }że wykona zadanie, ale następnie włącza reakcję bezpośrednio na stronę.

Dla wyłącznie WebPACK użytkowników v4:

Określenie mode: productioni mode: developmentw konfiguracji WebPacka zdefiniuje process.env.NODE_ENVdomyślnie użycie DefinePlugin. Nie potrzeba dodatkowego kodu!

webpack.prod.js (pobrane z dokumentów)

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

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

A w naszym JS:

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

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

Używam ręcznego procesu kompilacji, który działa przez Webpack, więc był to dla mnie proces dwuetapowy:

1. Ustaw zmienną środowiskową z package.json za pomocą pakietu 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. Zmień plik webpack.config.js, aby używał zmiennej środowiskowej (która jest przekazywana do Reacta w celu określenia, czy jesteśmy w trybie programistycznym, czy produkcyjnym) i wyłącz minimalizowanie utworzonego pakietu, jeśli jesteśmy w trybie programistycznym, abyśmy mogli zobaczyć aktualne nazwy naszych komponentów. W tym celu musimy użyć właściwości optymalizacji pakietu webpack w naszym pliku webpack.config.js :

   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