@rnx-kit/babel-preset-metro-react-native
provides a Babel preset for React
Native applications that you can use as a drop-in replacement for
metro-react-native-babel-preset
).
Add @rnx-kit/babel-preset-metro-react-native
to your babel.config.js
:
module.exports = {
presets: ["@rnx-kit/babel-preset-metro-react-native"],
};
If you want to add additional plugins, you can pass an options object:
module.exports = {
presets: [
[
"@rnx-kit/babel-preset-metro-react-native",
{
additionalPlugins: ["const-enum"],
},
],
],
};
If you're looking to reduce the bundle size, here are a couple of things you can try.
Since 7.13.0, Babel can make certain assumptions about your code to reduce the amount of generated code. You can read more about it in Compiler assumptions.
If you make heavy use of classes, but can't use compiler assumptions, you can
enable looseClassTransform
to remove helper functions:
module.exports = {
presets: [
[
"@rnx-kit/babel-preset-metro-react-native",
{
looseClassTransform: true,
},
],
],
};
This is equivalent to passing
{ loose: true }
to @babel/plugin-transform-classes
.
In your metro.config.js
, enable experimentalImportSupport
:
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
};
And disable import/export transformation in your babel.config.js
:
module.exports = {
presets: [
[
"@rnx-kit/babel-preset-metro-react-native",
{ disableImportExportTransform: true },
],
],
};
Doing this will help the minifier strip out some unused code, but make sure that your app still works after enabling it.
If you're using Lodash, you can get some reduction with
babel-plugin-lodash. Add it to
your babel.config.js
like below:
module.exports = {
presets: ["@rnx-kit/babel-preset-metro-react-native"],
plugins: ["lodash"],
};