Source: https://docs.expo.dev/guides/minify

Hide navigation

Search

Ctrl K

Home Guides EAS Reference Learn

Archive Expo Snack Discord and Forums Newsletter

Minifying JavaScript

Edit page

Copy page

Learn about customizing the JavaScript minification process in Expo CLI with Metro bundler.

Edit page

Copy page

---

Minification is an optimization build step. It removes unnecessary characters such as collapses whitespace, removes comments, and shortens static operations, from the source code. This process reduces the final size and improves load times.

Minification in Expo CLI

---

In Expo CLI, minification is performed on JavaScript files during the production export (when npx expo export, npx expo export:embed, eas build, and so on, commands run).

For example, consider following code snippet in a project:

Input

Copy

// This comment will be stripped console.log('a' + ' ' + 'long' + ' string' + ' to ' + 'collapse');

This will be minified by the Expo CLI:

Output

Copy

console.log('a long string to collapse');

Tip: Comments can be preserved by using the /** @preserve */ directive.

The default minification of Expo CLI is sufficient for most projects. However, you can customize the minifier to optimize for speed or remove additional features like logs.

Remove console logs

---

You can remove console logs from your production build. Use the drop_console option in the Terser minifier config.

metro.config.js

Copy

const { getDefaultConfig } = require('expo/metro-config'); const config = getDefaultConfig(__dirname); config.transformer.minifierConfig = { compress: { // The option below removes all console logs statements in production. drop_console: true, }, }; module.exports = config;

You can also pass an array of console types to drop if you want to preserve certain logs. For example: drop_console: ['log', 'info'] will remove console.log and console.info but preserve console.warn and console.error.

Customizing the minifier

---

Different minifiers have tradeoffs between speed and compression. You can customize the minifier used by Expo CLI by modifying the metro.config.js file in your project.

Terser

terser is the default minifier (Metro@0.73.0 changelog ).

1

To install Terser in a project, run the command:

Terminal

Copy

- yarn add --dev metro-minify-terser

2

Set Terser as a minifier with transformer.minifierPath, and pass in terser options to transformer.minifierConfig.

metro.config.js

Copy

const { getDefaultConfig } = require('expo/metro-config'); const config = getDefaultConfig(__dirname); config.transformer.minifierPath = 'metro-minify-terser'; config.transformer.minifierConfig = { // Terser options... }; module.exports = config;

Unsafe Terser options

For additional compression that may not work in all JavaScript engines, enable the unsafe compress options :

metro.config.js

Copy

const { getDefaultConfig } = require('expo/metro-config'); const config = getDefaultConfig(__dirname); config.transformer.minifierPath = 'metro-minify-terser'; config.transformer.minifierConfig = { compress: { // Enable all unsafe optimizations. unsafe: true, unsafe_arrows: true, unsafe_comps: true, unsafe_Function: true, unsafe_math: true, unsafe_symbols: true, unsafe_methods: true, unsafe_proto: true, unsafe_regexp: true, unsafe_undefined: true, unused: true, }, }; module.exports = config;

Show More

esbuild

esbuild is used to minify exponentially faster than uglify-es and terser. For more information, see metro-minify-esbuild usage.

Uglify

You can use uglify-es by following the steps below:

1

To install Uglify in a project, run the command:

Terminal

Copy

- yarn add --dev metro-minify-uglify

Make sure the version of metro-minify-uglify matches the version of metro in your project.

2

Set Uglify as a minifier with transformer.minifierPath, and pass in options to transformer.minifierConfig.

metro.config.js

Copy

const { getDefaultConfig } = require('expo/metro-config'); const config = getDefaultConfig(__dirname); config.transformer.minifierPath = 'metro-minify-uglify'; config.transformer.minifierConfig = { // Options: https://github.com/mishoo/UglifyJS#compress-options }; module.exports = config;