Webpack: Reducing the size of your output file (bundle.js)

Is the output file generated by webpack too large? Two things to check out.

# First: Check your configuration file

Many webpack.config.js examples are using process.env.npm_lifecycle_event to detect if it's a development build or a production build...

If your webpack.config.js contains a line like const TARGET = process.env.npm_lifecycle_event;, your problem is probably there.

# Solution 1: Build with "npm run build"

process.env.npm_lifecycle_event is only set when you are running webpack through npm run [script_name].

For this to work, you need to define a script called "build" inside your package.json file and then run webpack through npm run build (not just "npm build", as it has another meaning than "npm run build").

Example of package.json:

// ... (truncated)

"scripts": {
  "build": "webpack --production --optimize-minimize",
  "start": "webpack-dev-server"
},

// ... (truncated)

Note: The --optimize-minimize flag is optional, it will minimize your scripts (and your css) using the UglifyJs plugin (saving up more space!).

# Solution 2: Detect the --production flag when using webpack

Additionally, you can also modify your webpack.config.js file to detect the --production flag.

For example:

const TARGET = ((process.argv.indexOf('--production') > 0)
                || (process.argv.indexOf('-p') > 0)
                || (process.env.npm_lifecycle_event === 'build'))
               ? 'build' : 'start';

This line will set TARGET to "build" if you are using either the --production flag, the shorthand -p flag, or building through npm run build.

# Second: Analyze what is taking up the space

Generate the build stats with webpack: webpack --production --json > stats.json

Then upload stats.json to the webpack analyzer tool: https://webpack.github.io/analyse/ (or alternatively, use this command line npm module: webpack-bundle-size-analyzer).

Now you just have to go through the stats and figure out what you can remove to make your bundle.js smaller.