MENU


Assets Bundling & Code Minification

Most modern build tools (such as Vite) minify your production build automatically with zero configuration. The steps below are useful if you're configuring a bundler manually, or maintaining an existing Brunch, Browserify, Rollup, or Webpack setup.

For the most efficient Brunch production build, install the terser-brunch plugin:

Installing and running a minified Brunch build
npm install --save-dev terser-brunch
brunch build -p

For the most efficient Browserify production build, install a few plugins:


npm install --save-dev envify terser uglifyify

browserify ./index.js \
  -g [ envify --NODE_ENV production ] \
  -g uglifyify \
  | terser --compress --mangle > ./bundle.js

'envify' ensures the right build environment is set.

'uglifyify' removes development imports.

'terser' compresses the code.

For the most efficient Rollup production build, install a few plugins:

Installing Rollup production plugins
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser 

plugins: [
  // ...
  require('rollup-plugin-replace')({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  require('rollup-plugin-commonjs')(),
  require('rollup-plugin-terser')(),
  // ...
]

'commonjs' provides support for CommonJS in Rollup.

'replace' ensures the right build environment is set.

'terser' compresses and mangles the final bundle.

Webpack (used internally by Create React App, now deprecated, and still used directly by many other setups) minifies your code by default in production mode; Vite-based projects use Rollup and esbuild instead, which do the same.


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

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin({ /* additional options here */ })],
  },
};