`react-native-reanimated/plugin` babel plugin increases the size by 3x

[SYoder1]

`react-native-reanimated/plugin` babel plugin increases the size by 3x

[tjzel]

Hi @SYoder1.

We don't have a reliable way of detecting whether the target of the bundle is going to be a native or web platform (correct me here if I'm wrong @bartlomiejbloniarz), therefore to omit the data that's unnecessary on web we have an option that you should pass to the plugin, namely omitNativeOnlyData.

You can read more about it in our docs.

Please let me know if enabling this option fixes the bundle inflation.

[tomekzaw]

Hi @SYoder1, thanks for opening this issue.

Is this expected to increase the bundle size by that much?

The plugin needs to stringify all functions marked as 'worklet;' so they can be copied to a secondary runtime so that might be a reason of the bundle size increase. However, there's no secondary runtime on web so we might want to skip that step (to save up on bundle size) and only auto-generate dependency arrays.

@tjzel What do you think?

[SYoder1]

Hey @tjzel, I tried it out and saw small improvements with omitNativeOnlyData, I also tried it with substituteWebPlatformChecks and didn't see any changes

While still scratching my head at it, I noticed that the project compiles reanimated in the webpack config. I can't find any place in the docs that say to do this, so do you know if its needed at all? It actually makes the biggest difference around 50%.

const babelLoaderConfiguration = {
  test: /\.js$|jsx?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'App.jsx'), // Change this to your main App file
    path.resolve(appDirectory, 'node_modules/react-native-reanimated'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets,
      plugins: ['react-native-web'],
    },
  },
};

[tjzel]

Honestly I'm not that proficient with Webpack. I also don't exactly understand what do you mean by "project compiling Reanimated in the webpack config". Could you elaborate a little more on this?

Anyway, I think it should work without this setting, we never had something like this in our Webpack configs when we used them.

[SYoder1]

I am not an expert in webpack either, and there was a comment in the code for a long time ago "// Add every directory that needs to be compiled by Babel during the build." and reanimated was part of it.

I think what was happening was we were recompiling reanimated from typescript to a esmodule at build time, instead of using the module that is part of the package.