Docs
API
Examples
Docs
API
Examples

ChunksToHermesBytecode Plugin

Overview

ChunksToHermesBytecodePlugin is a webpack plugin designed to convert JavaScript chunks into Hermes bytecode for performance optimization. It also converts related source maps to be compatible with bytecode bundles.

CAUTION

This plugin is only meant to be run when bundling for production. It does not work during development.

The plugin hooks into the assetEmitted event of the webpack compilation process. If the plugin is enabled and the asset file matches the given rules, it will be converted into Hermes bytecode. If source maps exist for the asset, they are also processed and updated.

Options

  • enabled: Use this to enable/disable the plugin.
  • test, include, and exclude: Use these to determine which files the plugin will process.
  • hermesCLIPath: Use this to specify the path to the Hermes command-line tool. If not specified, the plugin will try to find it automatically.
  • reactNativePath: Use this to specify the path to the React Native package. If not specified, the plugin will try to find it automatically.
  • compareBeforeEmit: Use this to force enable compareBeforeEmit Webpack's output option.
INFO

This plugin will only transform assets that are emitted after the compilation.compareBeforeEmit option which is enabled by default in Webpack.

To ensure that asset is always emitted we disable the

compareBeforeEmit option is used to skip emitting assets that are identical to the ones present in build directory, which might result in transformation being skipped when there is a untransformed bundle present in the build directory.

Usage

To use ChunksToHermesBytecodePlugin, you need to instantiate it and add it to your webpack configuration's plugins array. Here's a simple example:

// webpack.config.mjs
import * as Repack from '@callstack/repack';

// ...
plugins: [
  new Repack.plugins.ChunksToHermesBytecodePlugin({
    enabled: mode === 'production' && !devServer,
    test: /\.(js)?bundle$/,
    exclude: /index.bundle$/,
  }),
];
CAUTION

If you enable Hermes in your project, your index.bundle file and it's source-map will be transformed by react-native. You should exclude it from the plugin to avoid processing it twice.

In the example above, the plugin is enabled only for production builds when bundling with webpack-bundle. It will process any files that end in .jsbundle or .bundle, but it will exclude index.bundle.