Bundle analysis - feasibility

[ilteoood]

I have a question about bundle analysis.

Looking at the documentation, it seems that we should be able to easily use the webpack-bundle-analyzer plugin to better understand what's bloating our bundle.

Unfortunately, it doesn't seems to be the case: webpack-bundle-analyzer supports the following RegEx to analyze the files

const FILENAME_EXTENSIONS = /\.(js|mjs|cjs)$/iu;

While repack instead outputs files with a .bundle extension.

To make it work I manually patched the bundle analyzer, but am I missing any configuration to make it work out of the box?

[Esemesek]

Hi,
We've encountered a similar issue in one of our repositories using rsdoctor and resolved it by patching webpack-bundle-analyzer (https://github.com/ZephyrCloudIO/zephyr-repack-example/blob/main/patches/webpack-bundle-analyzer.patch). The issue is being tracked here: web-infra-dev/rsdoctor#740.

[ilteoood]

That's great @Esemesek!

What if we put a link to this discussion into the Re-Pack doc? So who will come next has a better context about it.

[ilteoood]

@Esemesek I've been able to get rid of manual patching by inserting this configuration in the rspack config:

...
output: {
    clean: true,
    hashFunction: 'xxhash64',
    filename: 'index.bundle.js',
    chunkFilename: '[name].chunk.bundle.js',
    path: '[context]/build/generated/[platform]',
    publicPath: 'noop:///'
  }

I'm essentially appending the .js extension to the output so we can use the standard js tools that filter by extension.

[jbroma]

FYI while this will work for the tool, RN expects the [name].bundle format for the entrypoints e.g. index.bundle

[ilteoood]

FYI while this will work for the tool, RN expects the [name].bundle format for the entrypoints e.g. index.bundle

Yes that's true. I've also a condition to apply it based on an env var that I've removed for clarity