压缩 JavaScript

编辑页面

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

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

Expo CLI 中的压缩

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

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

Input

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

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

Output

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

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

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

移除 console 日志

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

metro.config.js

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 更新日志）。

要在项目中安装 Terser，请运行以下命令：

Terminal

- yarn add --dev metro-minify-terser

使用 transformer.minifierPath 将 Terser 设置为压缩器，并将 terser 选项传入 transformer.minifierConfig。

metro.config.js

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 选项：

metro.config.js

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：

要在项目中安装 Uglify，请运行以下命令：

Terminal

- yarn add --dev metro-minify-uglify

请确保 metro-minify-uglify 的版本与你项目中的 metro 版本一致。

使用 transformer.minifierPath 将 Uglify 设置为压缩器，并将选项传入 transformer.minifierConfig。

metro.config.js

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;