Question

我使用webpack作为我的捆绑包，我想有时测试真正的性能，而不必实际捆绑整个应用程序。有没有办法暂时关闭React开发模式？据我所知，React的生产版本实际上是一个不同的文件，删除了所有额外的调试信息，但我不知道如何强制应该加载哪个版本。

Answer 1

告诉Webpack使用Node的生产环境。一种方法是在Webpack配置中使用DefinePlugin将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缩小为生产，React会显示一条警告消息，说明您已将非生产代码缩小：

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表现相似。 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）
React docs说/dist/react.min.js针对生产进行了优化。我没有读过任何证据，只是手写，'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }加上uglify和＆＃39; / 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'))
    }
  }

如何在使用webpack时暂时打开/关闭React开发模式？

3 个答案: