如何在使用webpack時暫時開啓/關閉React開發模式？

Question

我正在使用webpack作爲我的打包程序，而且我想要測試真實的性能，而不必實際捆綁整個應用程序。有沒有辦法暫時關閉React開發模式？據我所知，React的生產版本實際上是一個不同的文件，所有額外的調試信息都被剝離了，但我不知道如何強制加載哪個版本。

Answer 1

告訴Webpack使用Node的生產環境。這樣做的一個方法是使用DefinePlugin在你的WebPack配置設置process.env生產：

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

還要確保使用生產就緒devtool選項，例如devtool: 'cheap-module-source-map'和不是devtool: 'eval'（也在您的Webpack配置中）。

Answer 2

React的生產版本只是.min.js版本。來自download page：

我們提供了兩個版本的React：一個用於開發的未壓縮版本和一個用於生產的縮小版本。開發版本包含關於常見錯誤的額外警告，而生產版本包含額外的性能優化並去除所有錯誤消息。

因此，如果您將其包含在您的資產管道中，而不是未壓縮版本，則可以在「生產」模式下測試您的應用程序。

Answer 3

假設您使用npm安裝React 15.0.1，import react from 'react'或react = require('react')將運行./mode_modules/react/lib/React.js這是React的原始來源。

React文檔建議您使用./mode_modules/react/dist/react.js進行開發，使用react.min.js進行生產。

你應該再壓縮/lib/React.js或/dist/react.js生產，陣營將顯示你已經過壓縮非生產代碼的警告信息：

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.

反應-DOM，終極版，反應，終極版的行爲類似。 Redux顯示警告消息。我相信react-dom也是。

因此，您明確鼓勵使用/dist的生產版本。

但是，如果你縮小了/dist版本，webpack的UglifyJsPlugin會抱怨。

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

您無法避免這樣的消息，因爲UglifyJsPlugin只能排除的WebPack塊，而不是單個文件。

我自己使用開發和生產版本/dist。

• Webpack有更少的工作要做，並儘快完成。 （YRMV）
• 反應文檔說/dist/react.min.js已針對生產進行了優化。我讀過沒有任何證據，只是手忙腳亂，'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }加上uglify和'/ dist/react.min.js`一樣不錯。
• 我從uglify獲得1條警告消息，而不是來自react/redux生態系統的3條警告消息。

你可以的WebPack使用/dist版本有：

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