Webpacker not minifying JS in production

Question

I’m working on a React app that uses Webpacker. Our production code is not being minified and I’ve been tasked with determining why. I don’t find anything in the documentation that talks about how to minify production code. It seems as though it should be on by default, so my guess is that we’re disabling it somewhere, but I’m not sure where.

This is our Webpacker yaml config:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: false

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: true

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .jsx
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: false

  # Verifies that versions and hashed value of the package contents in the project's package.json
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    http: true
    host: webpacker
    port: 3035
    public: https://webpacker.local.website.com:443
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'
      poll: 1000
      aggregate_timeout: 100


test:
  <<: *default

deployed: &deployed
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

production:
  <<: *deployed

staging:
  <<: *deployed

…and our production Webpack file:

process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

const environment = require('./environment');

var ManifestPlugin = require('webpack-manifest-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const config = environment.toWebpackConfig();
config.plugins.prepend = (new ManifestPlugin());

config.optimization = {
  minimizer: [new UglifyJsPlugin({
    parallel: 4,
  })],
}

module.exports = smp.wrap(config);

What should I be looking for to get minification working for our production builds? Does anything here stand out as the culprit?

Answer 1

I ended up having to make just a couple of small edits to my production Webpack file.

I changed this:

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

… to this:

process.env.NODE_ENV = process.env.NODE_ENV || 'production';

Which resulted in the production build of React being used. And I added this:

config.mode = 'production';

Which resulted in my JS being minified.

For good measure I also replaced UglifyJS with Terser, ending up with a file that looks like this:

process.env.NODE_ENV = process.env.NODE_ENV || 'production';
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

const ManifestPlugin = require('webpack-manifest-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const environment = require('./environment');

const config = environment.toWebpackConfig();
config.plugins.prepend = (new ManifestPlugin());

config.mode = 'production';

config.optimization = {
  minimizer: [
    new TerserPlugin({
      parallel: true,
      terserOptions: {
        ecma: 6,
      },
    }),
  ],
};

module.exports = smp.wrap(config);

Answer 2

In my case simply ensuring that the NODE_ENV environment variable was set to production in my deployment script was the missing piece.