This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

了解如何在 Expo CLI 中使用 Metro bundler 自定义 JavaScript 压缩流程。

压缩是一个优化构建步骤。它会从源代码中移除不必要的字符，例如压缩空白字符、删除注释以及缩短静态操作。这个过程可以减小最终体积并提升加载速度。

Expo CLI 中的压缩

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

例如，考虑项目中的以下代码片段：

// 这条注释会被移除
console.log('a' + ' ' + 'long' + ' string' + ' to ' + 'collapse');

这段代码会被 Expo CLI 压缩为：

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

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

Expo CLI 的默认压缩对大多数项目来说已经足够。不过，你可以自定义压缩器，以优化速度或移除额外功能，例如日志。

移除 console 日志

你可以从生产构建中移除 console 日志。使用 Terser 压缩器配置中的 drop_console 选项。

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

const config = getDefaultConfig(__dirname);

config.transformer.minifierConfig = {
  compress: {
    // 下面的选项会移除生产环境中的所有 console 日志语句。
    drop_console: true,
  },
};

module.exports = config;

如果你希望保留某些日志，也可以传入一个要移除的 console 类型数组。例如：drop_console: ['log', 'info'] 将移除 console.log 和 console.info，但保留 console.warn 和 console.error。

自定义压缩器

不同的压缩器在速度和压缩率之间各有取舍。你可以通过修改项目中的 metro.config.js 文件来定制 Expo CLI 使用的压缩器。

Terser

terser 是默认压缩器（Metro@0.73.0 更新日志）。

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

const config = getDefaultConfig(__dirname);

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

module.exports = config;

不安全的 Terser 选项

为了获得额外的压缩效果，但这些优化可能无法在所有 JavaScript 引擎中正常工作，请启用 unsafe compress 选项：

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

const config = getDefaultConfig(__dirname);

config.transformer.minifierPath = 'metro-minify-terser';

config.transformer.minifierConfig = {
  compress: {
    // 启用所有不安全优化。
    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 的使用说明。

Uglify

你可以按照以下步骤使用 uglify-es：

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

const config = getDefaultConfig(__dirname);

config.transformer.minifierPath = 'metro-minify-uglify';
config.transformer.minifierConfig = {
  // 选项：https://github.com/mishoo/UglifyJS#compress-options
};

module.exports = config;