Bagaimana cara mengaktifkan / menonaktifkan 'mode pengembangan' ReactJS?

Mulai menggunakan fitur validasi prop ReactJS , yang menurut dokumen hanya berfungsi dalam 'mode pengembangan' karena alasan performa.

React tampaknya memvalidasi properti dari komponen tertentu yang telah saya beri anotasi, tetapi saya tidak ingat secara eksplisit mengaktifkan 'mode pengembangan'.

Saya mencoba mencari cara memicu / mengubah mode pengembangan, tetapi belum berhasil.

Jawaban lain mengasumsikan Anda menggunakan file eksternal yang sudah dibuat sebelumnya dari react, dan meskipun benar itu bukan cara kebanyakan orang akan atau harus menggunakan React sebagai sebuah paket. Terlebih lagi, pada titik ini hampir setiap pustaka dan paket React juga bergantung pada konvensi yang sama untuk mematikan pembantu waktu pengembang selama produksi. Hanya menggunakan reaksi yang diperkecil akan meninggalkan semua potensi pengoptimalan di atas meja juga.

Pada akhirnya keajaiban datang ke React yang menyematkan referensi ke process.env.NODE_ENVseluruh basis kode; ini bertindak seperti fitur toggle.

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

Di atas adalah pola yang paling umum, dan pustaka lain juga mengikutinya. Jadi untuk "menonaktifkan" pemeriksaan ini kita perlu beralih NODE_ENVke"production"

Cara yang tepat untuk menonaktifkan "mode pengembang" adalah melalui bundler pilihan Anda.

webpack

Gunakan DefinePlugindi konfigurasi webpack Anda seperti ini:

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

Browserify

Gunakan Envify transform dan jalankan langkah build browserify Anda dengan NODE_ENV=production( "set NODE_ENV=production"di Windows)

Hasil

Ini akan menghasilkan bundel keluaran yang memiliki semua contoh process.env.NODE_ENVdiganti dengan string literal:"production"

Bonus

Saat mengecilkan kode yang diubah, Anda dapat memanfaatkan "Penghapusan Kode Mati". DCE adalah ketika minifier yang cukup pintar untuk menyadari bahwa: "production" !== "production"adalah selalu salah dan jadi hanya akan menghapus kode apapun dalam jika blok menghemat byte.

Ya, ini tidak didokumentasikan dengan baik, tetapi pada halaman unduh ReactJS berbicara tentang mode pengembangan dan produksi:

Kami menyediakan dua versi React: versi tidak terkompresi untuk pengembangan dan versi minified untuk produksi. Versi pengembangan menyertakan peringatan tambahan tentang kesalahan umum, sedangkan versi produksi menyertakan pengoptimalan performa ekstra dan menghapus semua pesan error.

Pada dasarnya, versi React yang tidak dikecilkan adalah mode "pengembangan", dan versi yang dikecilkan dari React adalah mode "produksi".

Untuk berada dalam mode "produksi", cukup sertakan versi yang diperkecil react-0.9.0.min.js

Saya memposting ini di tempat lain tetapi, terus terang, di sini akan menjadi tempat yang lebih baik.

Dengan asumsi Anda menginstal React 15.0.1 dengan npm, import react from 'react'atau react = require('react')akan berjalan ./mode_modules/react/lib/React.jsyang merupakan sumber mentah React.

Dokumen React menyarankan Anda menggunakan ./mode_modules/react/dist/react.jsuntuk pengembangan dan react.min.jsproduksi.

Jika Anda meminimalkan /lib/React.jsatau /dist/react.jsuntuk produksi, React akan menampilkan pesan peringatan bahwa Anda telah meminimalkan kode non-produksi:

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 berperilaku serupa. Redux menampilkan pesan peringatan. Saya percaya react-dom juga begitu.

Jadi, Anda jelas didorong untuk menggunakan versi produksi dari /dist.

Namun jika Anda mengecilkan /distversinya, UglifyJsPlugin webpack akan mengeluh.

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

Anda tidak dapat menghindari pesan ini karena UglifyJsPlugin hanya dapat mengecualikan potongan webpack, bukan file individual.

Saya menggunakan versi pengembangan dan produksi /distsendiri.

• Webpack memiliki lebih sedikit pekerjaan yang harus dilakukan dan selesai sedikit lebih cepat. (YRMV)
• Dokumen React mengatakan /dist/react.min.jsdioptimalkan untuk produksi. Saya tidak membaca bukti bahwa 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify berfungsi sebaik '/ dist / react.min.js`. Saya tidak membaca bukti bahwa Anda mendapatkan kode yang sama.
• Saya mendapat 1 pesan peringatan dari uglify daripada 3 dari ekosistem react / redux.

Anda dapat meminta webpack menggunakan /distversinya dengan:

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

Untuk build berbasis webpack, saya biasa menyiapkan webpack.config.js terpisah untuk DEV dan PROD. Untuk Prod, selesaikan alias seperti di bawah ini

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

Anda dapat menemukan yang berfungsi dari sini

Jika Anda mengerjakan sesuatu seperti tutorial ReactJS.NET / Webpack ini , Anda tidak dapat menggunakan process.env untuk mengaktifkan / menonaktifkan mode pengembangan React sejauh yang saya tahu. Contoh ini menautkan ke react.js secara langsung (lihat Index.cshtml ), jadi Anda hanya perlu memilih .min.js atau varian yang tidak dikecilkan dengan mengubah URL.

Saya tidak yakin mengapa demikian, karena contoh webpack.config.js memiliki komentar yang tampaknya menyiratkan externals: { react: 'React' }akan melakukan pekerjaan itu, tetapi kemudian melanjutkan dan menyertakan bereaksi langsung ke halaman.

Untuk hanya pengguna v4 Webpack:

Menentukan mode: productiondan mode: developmentdalam konfigurasi Webpack Anda akan menentukan process.env.NODE_ENVmenggunakan DefinePlugin secara default. Tidak perlu kode tambahan!

webpack.prod.js (diambil dari dokumen)

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

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

Dan di JS kami:

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

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

Saya menggunakan proses pembuatan manual yang berjalan melalui Webpack, jadi itu adalah proses dua langkah bagi saya:

1. Setel variabel lingkungan dari package.json menggunakan paket 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. Ubah file webpack.config.js untuk menggunakan variabel lingkungan (yang diteruskan ke React untuk menentukan apakah kita dalam mode pengembangan atau produksi), dan nonaktifkan meminimalkan bundel yang diproduksi jika kita dalam mode pengembangan sehingga kita dapat melihat nama sebenarnya dari komponen kami. Kita perlu menggunakan properti pengoptimalan webpack di file webpack.config.js untuk ini:

   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