缩小 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 中，JavaScript 文件的压缩会在生产导出期间进行（当运行 npx expo export、npx expo export:embed、eas build 等命令时）。

🌐 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 */ 指令保留注释。

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 压缩器配置中使用 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 更新日志)。

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 的用法。

混淆

🌐 Uglify

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

🌐 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;