NODE_ENV ==='production'之外的缩小代码。这意味着Redux的开发构建速度较慢

时间:2016-08-24 18:44:13

标签: reactjs webpack redux

所以这是完整的错误: 您目前正在使用NODE_ENV ==='production'之外的缩小代码。这意味着您正在运行较慢的Redux开发版本。

我正在使用第三方图表库CanvasJS,它需要访问全局范围。当我在任何模块中导入它时,似乎实际的代码在浏览器中中断(可能是this问题)。

我通过使用Webpack解决了这个问题,并且使用gulp将bundle.min.js与缩小的Charting库捆绑在一起。

在我尝试生产构建之前,这很好用。我认为 CanvasJS 的引用可能会在此过程中受到损害。

我的Webpack.config文件:

 var debug = process.env.NODE_ENV !== "production";
 var webpack = require('webpack');
 var path = require('path');

 module.exports = {
  context: path.join(__dirname, "public"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/main.js",
  resolve: {
   alias: {
    'react': 'react-lite',
    'react-dom': 'react-lite'
   }
  }, 
  module: {
  loaders: [
    {
     test: /\.jsx?$/,
     exclude: /(node_modules|bower_components)/,
     loader: 'babel-loader',
     query: {
       presets: ['react', 'es2015', 'stage-0'],
       plugins: [ 'transform-class-properties', 'transform-decorators-legacy'],
     }
   }
 ]
},
output: {
  path: __dirname + "/public/build/",
  filename: "bundle2.min.js"
},
plugins: debug ? [] : [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  //  new webpack.optimize.AggressiveMergingPlugin()
  new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};

我试图将CanvasJS标记为外部,但这也不起作用。如何让Redux“不要慢”,并引用全局对象?

2 个答案:

答案 0 :(得分:20)

您需要添加:

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

适用于您的生产配置

答案 1 :(得分:0)

设置“模式”有助于解决webpack 4中的以下问题,您可以将mode:development / production的值用于相应的配置文件。

module.exports = {
  mode: 'development'
};