Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docsite/docs/guides/bundling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,9 @@ Tree shaking is _off_ by default. You can control it with the
}
```

For setup details, options, bundle-size checks, and known limitations, see the
[`@rnx-kit/metro-serializer-esbuild` documentation](/docs/tools/metro-serializer-esbuild).

### Duplicate Dependencies

Did you know that your app bundle can have multiple copies of a single package
Expand Down
63 changes: 63 additions & 0 deletions packages/metro-serializer-esbuild/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,54 @@ Native below 0.64.

## Usage

If you use `react-native rnx-bundle`, enable tree shaking in your rnx-kit
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should mention @rnx-kit/cli and the rnx-bundle command in a parenthesis e.g., "if you use @rnx-kit/cli (or react-native rnx-bundle)…

configuration:

```json
{
"rnx-kit": {
"bundle": {
"entryFile": "index.js",
"targets": ["android", "ios"],
"treeShake": true
}
}
}
```

Then create a production bundle:

```sh
react-native rnx-bundle --platform ios --dev false
```

The `treeShake` property can also be an options object for this serializer:

```json
{
"rnx-kit": {
"bundle": {
"treeShake": {
"analyze": true,
"metafile": "dist/esbuild-meta.json",
"drop": ["debugger"]
}
}
}
}
```

For one-off validation, use the command-line override:
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should include that users can refer to the Options section further down for available options.


```sh
react-native rnx-bundle --platform ios --dev false --tree-shake true
```

Tree shaking only runs for production bundles. If `--dev` is true, it is turned
off even when `treeShake` is enabled.

### Manual Metro Setup

esbuild works best when we pass it ES6 modules. The first thing we must do is to
disable import/export transformation by enabling `disableImportExportTransform`
in `babel.config.js`:
Expand Down Expand Up @@ -99,6 +147,21 @@ We can now create a bundle as usual, e.g.:
react-native bundle --entry-file index.js --platform ios --dev false ...
```

## Checking the Result

Build once without tree shaking and once with it, then compare bundle sizes:

```sh
react-native rnx-bundle --platform ios --dev false --tree-shake false
mv index.ios.jsbundle index.ios.baseline.jsbundle

react-native rnx-bundle --platform ios --dev false --tree-shake true
ls -lh index.ios.baseline.jsbundle index.ios.jsbundle
```
Comment on lines +152 to +160
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need this section. It's not platform agnostic and people should know how to do this already. I would maybe expand the section about the analyzer a bit and include a link to it: https://esbuild.github.io/analyze/


For deeper inspection, enable `metafile` and load the generated JSON in an
esbuild metafile analyzer.

## Options

Similar to
Expand Down