Reactjs 使用webpack时如何临时打开/关闭React开发模式?

Reactjs 使用webpack时如何临时打开/关闭React开发模式?,reactjs,webpack,Reactjs,Webpack,我使用webpack作为绑定器,有时我想测试实际性能,而不必实际绑定整个应用程序。有没有办法暂时关闭React开发模式?据我所知,React的生产版本实际上是一个不同的文件,删除了所有额外的调试信息,但我不知道如何强制加载哪个版本。React的生产版本只是.min.js版本。从: 我们提供了React的两个版本:用于开发的未压缩版本和用于生产的缩小版本。开发版本包括关于常见错误的额外警告,而生产版本包括额外的性能优化并去除所有错误消息 因此,如果您将其包含在资产管道中,而不是未压缩的版本,您将能

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

React的生产版本只是
.min.js
版本。从:

我们提供了React的两个版本:用于开发的未压缩版本和用于生产的缩小版本。开发版本包括关于常见错误的额外警告,而生产版本包括额外的性能优化并去除所有错误消息


因此,如果您将其包含在资产管道中,而不是未压缩的版本,您将能够在“生产”模式下测试应用程序。

React的生产版本就是
.min.js
版本。从:

我们提供了React的两个版本:用于开发的未压缩版本和用于生产的缩小版本。开发版本包括关于常见错误的额外警告,而生产版本包括额外的性能优化并去除所有错误消息


因此,如果您将其包括在资产管道中,而不是未压缩的版本,您将能够在“生产”模式下测试应用程序。

告诉Webpack使用节点的生产环境。一种方法是在网页包配置中使用
DefinePlugin
,将
process.env
设置为生产:

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

还请确保使用生产就绪的devtool选项,例如
devtool:“廉价模块源代码映射”
devtool:“eval”
(也在您的网页包配置中)。

告诉网页包使用节点的生产环境。一种方法是在网页包配置中使用
DefinePlugin
,将
process.env
设置为生产:

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

另外,请确保使用生产就绪的devtool选项,例如
devtool:“廉价模块源代码映射”
devtool:“eval”
(也在您的网页配置中)。

假设您使用npm安装React 15.0.1,
从“React”导入React
React=React('React'))
将运行
/mode\u modules/react/lib/react.js
,这是react的原始源代码

React文档建议您使用
/mode\u modules/React/dist/React.js
进行开发,使用
React.min.js
进行生产

如果您缩小生产的
/lib/React.js
/dist/React.js
,React将显示一条警告消息,表明您已缩小非生产代码:

警告:看起来您使用的是React开发版本的缩小副本。将React应用程序部署到生产环境时,请确保使用跳过开发警告且速度更快的生产环境。有关更多详细信息,请参见fb.me/react-minification。

react-dom、redux、react-redux的行为类似。Redux显示一条警告消息。我相信多姆也是

因此,我们明确鼓励您使用
/dist
的生产版本

然而,如果你缩小
/dist
版本,webpack的UglifyJsPlugin就会抱怨

../~/react/dist/react.js中的警告 关键依赖项: 4:478-485这似乎是一个预构建的javascript文件。虽然这是可能的,但不建议这样做。尝试要求原始源获得更好的结果。 @../~/react/dist/react.js 4:478-4851

您无法避免此消息,因为UglifyJsPlugin只能排除网页块,而不能排除单个文件

我自己使用开发和生产的
/dist
版本

  • Webpack需要做的工作更少,完成得更快。(YRMV)
  • React文档表示,
    /dist/React.min.js
    针对生产进行了优化。我没有读到任何证据,只是手工保存,
    'process.env':{NODE\u env:JSON.stringify(IS_PRODUCTION?'PRODUCTION':'development')}
    plus 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'))
    }
  }

假设您使用npm安装React 15.0.1,
从“React”导入React
React=require('React')
将运行作为React原始源的
/mode\u modules/React/lib/React.js

React文档建议您使用
/mode\u modules/React/dist/React.js
进行开发,使用
React.min.js
进行生产

如果您缩小生产的
/lib/React.js
/dist/React.js
,React将显示一条警告消息,表明您已缩小非生产代码:

警告:看起来您使用的是React开发版本的缩小副本。将React应用程序部署到生产环境时,请确保使用跳过开发警告且速度更快的生产环境。有关更多详细信息,请参见fb.me/react-minification。

react-dom、redux、react-redux的行为类似。Redux显示一条警告消息。我相信多姆也是

因此,我们明确鼓励您使用
/dist
的生产版本

然而,如果你缩小
/dist
版本,webpack的UglifyJsPlugin就会抱怨

../~/react/dist/react.js中的警告 关键依赖项: 4:478-485这似乎是一个预构建的javascript文件。虽然这是可能的,但不建议这样做。尝试要求原始源获得更好的结果。 @../~/react/dist/react.js 4:478-4851

您无法避免此消息,因为UglifyJsPlugin只能排除网页块,而不能排除单个文件。