Remix SPA infinite refresh, I found solutions but I don't understand how these configs work

[wonu]

My project is Remix SPA and I am using @uniswap/smart-order-router library. (Stackblitz repro is here)
I heard that in order for the library to be built well, first need to add several node polyfills and add Browser to the window object, so I didn't know much about it, but I followed suit.

The real problem is next, if you build it in this state, infinite refresh will occur during preview.
This is because if Remix fails to load the route module, it refreshes. (It is unfortunate that it was difficult to find the cause because there was no particular warning message.)

And the reason for the failure is that JSBI was not bundled properly:

TypeError: r.BigInt is not a function

There are two solutions I found for this:

// vite.config.ts
build: {
  commonjsOptions: {
    // Option 1
    // https://github.com/Uniswap/smart-order-router/issues/191#issuecomment-1722562705
    requireReturnsDefault: (e) => e.includes('jsbi'),
  },
},
resolve: {
  alias: {
    // Option 2
    // https://stackoverflow.com/a/77772855
    jsbi: path.resolve(__dirname, 'node_modules/jsbi'),
  },
},

When I checked the build chunk, I found the following:

1. with build.commonjsOptions, the JSBI class is used as is.
2. with resolve.alias, almost the same code (jsbiUmd) is created and used while the existing JSBI is present.

Here's what I'm curious about:

1. Why can’t I just build without the two options?
2. Why does build.commonjsOptions work?
3. Why does resolve.alias work and why does it change to UMD?
4. Are there other solutions?
5. The build chunk is as large as 7MB, but why is it not split?

I tried to search through various documents, but my brain was overloaded due to lack of basic knowledge.
I would appreciate your help.