压缩 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 的默认压缩对大多数项目而言是足够的。然而，您可以自定义压缩器以优化速度或去除额外的功能，如日志。

移除控制台日志

您可以从生产构建中移除控制台日志。在 Terser 压缩器配置中使用 drop_console 选项。

metro.config.js

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

const config = getDefaultConfig(__dirname);

config.transformer.minifierConfig = {
  compress: {
    // 以下选项将在生产中移除所有控制台日志语句。
    drop_console: true,
  },
};

module.exports = config;

如果您希望保留某些日志，也可以传递要删除的控制台类型数组。例如：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

将 Terser 设置为压缩器，使用 transformer.minifierPath，并将 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 版本匹配。

将 Uglify 设置为压缩器，使用 transformer.minifierPath，并将选项传递给 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;