webpack-bundle-analyzer显示webpack -p不会删除开发依赖项react-dom.development.js

Question

This is my webpack setup

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


const SOURCE_DIR = './src';
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: SOURCE_DIR + '/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = env => {
  console.log(`Environment Configs: ${JSON.stringify(env) || 'Default'}`);
  console.log(`
  Available Configs:
  --env.watch = true / false //for allow webpack to watch build
  `)
  let environment = env || {};
  const {
    watch,
    analyze,
  } = environment;

  const configedAnalyzer = new BundleAnalyzerPlugin({
    // Can be `server`, `static` or `disabled`.
    // In `server` mode analyzer will start HTTP server to show bundle report.
    // In `static` mode single HTML file with bundle report will be generated.
    // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
    analyzerMode: 'static',//was server
    // Host that will be used in `server` mode to start HTTP server.
    analyzerHost: '127.0.0.1',
    // Port that will be used in `server` mode to start HTTP server.
    analyzerPort: 9124,
    // Path to bundle report file that will be generated in `static` mode.
    // Relative to bundles output directory.
    reportFilename: './../report/bundle_anlaysis.html',
    // Module sizes to show in report by default.
    // Should be one of `stat`, `parsed` or `gzip`.
    // See "Definitions" section for more information.
    defaultSizes: 'stat',
    // Automatically open report in default browser
    openAnalyzer: Boolean(analyze),
    // If `true`, Webpack Stats JSON file will be generated in bundles output directory
    generateStatsFile: Boolean(analyze),
    // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
    // Relative to bundles output directory.
    statsFilename: 'stats.json',
    // Options for `stats.toJson()` method.
    // For example you can exclude sources of your modules from stats file with `source: false` option.
    // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
    statsOptions: null,
    // Log level. Can be 'info', 'warn', 'error' or 'silent'.
    logLevel: 'info'
  });

  return {
    entry: SOURCE_DIR + '/index.js',
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env', 'react']
            }
          }
        }
      ]
    },
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    watch: Boolean(watch),
    plugins: [HtmlWebpackPluginConfig, configedAnalyzer], //
    devServer: {
      contentBase: path.join(__dirname, "dist"),
      compress: false,
      port: 9123,
    }
  };
}

When I do webpack -p file size is a lot smaller but this react-dom.development.js take over almost 50% of the size, in my case 500ish KB out of 1.1ish MB.

Report here:

To see a demo of the report and how it got run you can check this repository.

NOTE: even I add NODE_ENV=production , size is smaller but the development JavaScript file is still there!

Answer 1

Your application's process.env.NODE_ENV variable needs to be set to production within webpack's build script. React's Optimizing Performance documentation instructs webpack users to do this using webpack's DefinePlugin .

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

While it seems that the -p option should set process.env.NODE_ENV to production , there is a caveat explained in Webpack's Specifying the Environment documentation that this is not set withtin webpack's build script (for what its worth, many developers have reported this as an issue ).