1

I want to see how much of a speed boost I get from using the non dev version of everything so I built my site using my "production" webconfig. but dev tools still is telling me it is in "development" mode

This page is using the development build of React. 

const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const common = require("./webpack.common.js");

module.exports = merge(common, {
  // Provides process.env.NODE_ENV with value production.
  // Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
  // ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,
  // SideEffectsFlagPlugin and UglifyJsPlugin.
  mode: "production",
  // see https://webpack.js.org/configuration/optimization/
  optimization: {
    // minimize default is true
    minimizer: [
      // Optimize/minimize CSS assets.
      // Solves extract-text-webpack-plugin CSS duplication problem
      // By default it uses cssnano but a custom CSS processor can be specified
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        // only use MiniCssExtractPlugin in production and without style-loader
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    // Mini CSS Extract plugin extracts CSS into separate files.
    // It creates a CSS file per JS file which contains CSS.
    // It supports On-Demand-Loading of CSS and SourceMaps.
    // It requires webpack 4 to work.
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new BundleAnalyzerPlugin()
  ]
});

in my package.json

  "scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-serve --config webpack.dev.js --open",
    "prod": "cross-env NODE_ENV=prod  webpack -p --config webpack.prod.js",
    "qa": "cross-env NODE_ENV=QA webpack --config webpack.prod.js"
  },
chobo2
  • 83,322
  • 195
  • 530
  • 832
  • Have you (accidentally) registered the service worker? Maybe that’s it. – grooveplex May 16 '19 at 23:21
  • I don't know what you mean by service worker? – chobo2 May 16 '19 at 23:25
  • I mean this: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app – grooveplex May 16 '19 at 23:26
  • I'm not going to pretend like I have any confidence by posting an answer, but some preliminary google searches show everyone setting `NODE_ENV` to `production` rather than `prod` and apparently `webpack -p` sets that automatically (which - wild guess - is choosing not to override your manual NODE_ENV=prod). Again, 0 confidence. – HPierce May 17 '19 at 00:53

1 Answers1

0

My confidence is growing that your problem stems from setting NODE_ENV to prod in your package.json. I think you should instead set it to production, or allow webpack to set it internally with the mode option in your webpack config.

The react-scripts package explicitly sets this value to production for building and searching for NODE_ENV in the facebook/react project in github project shows tons of checks for production as the value instead of prod.

Here's the index.js file for react-is, many other projects in the react source follow the same pattern:

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react-is.production.min.js');
} else {
  module.exports = require('./cjs/react-is.development.js');
}

I would try changing your build script to:

"prod": "cross-env NODE_ENV=production webpack -p --config webpack.prod.js",

or even let webpack -p set it automatically:

"prod": "cross-env webpack -p --config webpack.prod.js",
HPierce
  • 7,249
  • 7
  • 33
  • 49
  • ok, so you want me to just change my script line to what you have correct? I will try this tomorrow to see what the react tool is, but run your second "prod" line and I am seeing a main.js.map file so I am not sure if that means it is still dev? – chobo2 May 17 '19 at 03:55
  • I'm not sure about the `main.js.map` file - I would have expected that to be generated by a `devtool` option. That said, I know some companies send their source maps to production for whatever reason. So I don't think it's a hard indicator of still being in dev. – HPierce May 17 '19 at 23:42