缩小 JavaScript

了解如何使用 Metro 打包程序在 Expo CLI 中自定义 JavaScript 缩小流程。

缩小是优化构建步骤。它从源代码中删除不必要的字符，例如折叠空格、删除注释并缩短静态操作。此过程减少了最终大小并缩短了加载时间。

¥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.

Expo CLI 中的缩小

¥Minification in Expo CLI

在 Expo CLI 中，在生产导出期间（当运行 npx expo export、npx expo export:embed、eas build 等命令时）对 JavaScript 文件执行缩小。

¥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:

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

这将被 Expo CLI 缩小：

¥This will be minified by the Expo CLI:

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

提示：可以使用 /** @preserve */ 指令保留注释。

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

Expo CLI 的默认缩小对于大多数项目来说已经足够了。但是，你可以自定义缩小器以优化速度或删除日志等附加功能。

¥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

你可以从生产版本中删除控制台日志。在 Terser minifier 配置中使用 drop_console 选项。

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

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;

如果你想保留某些日志，你还可以传递要删除的控制台类型数组。例如：drop_console: ['log', 'info'] 将删除 console.log 和 console.info，但保留 console.warn 和 console.error。

¥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

不同的压缩器在速度和压缩之间进行权衡。你可以通过修改项目中的 metro.config.js 文件来自定义 Expo CLI 使用的压缩器。

¥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 是默认的压缩器（Metro@0.73.0 变更日志）。

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

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.transformer.minifierPath = 'metro-minify-terser';
config.transformer.minifierConfig = {
  // Terser options...
};

module.exports = config;

不安全的 Terser 选项

¥Unsafe Terser options

对于可能不适用于所有 JavaScript 引擎的额外压缩，请启用 unsafe compress 选项：

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

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;

esbuild

esbuild 用于比 uglify-es 和 terser 更快地缩小。有关详细信息，请参阅 metro-minify-esbuild 用法。

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

混淆

¥Uglify

对于 SDK 48 及以上版本的项目，你可以按照以下步骤使用 uglify-es：

¥For projects SDK 48 and above, you can use uglify-es by following the steps below:

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;