Description

For example - for error reporting I use sentry, which is pretty big (200kb) and it must be runned before all of my code.

So, I created file sentry.ts, which just reexports all sentry code and initialize it. To run it first there is two options:

1. (My current) - just import it at very top of entry file
2. (Much better) - reference it in index.html before my entry file.
   

Browser always run scripts in html order, so sentry successfully inits before my code, and all imports from it works as intended.
Additionaly, browser can download and parse both sentry and app code in parallel, which is obviosly good for performance.

But currently there is two major concerns in vite for such approach:

1. (In build) There is no enforced code splitting for scripts, referenced in html - so sentry code will be included in app file.
2. (In dev) HMR is not working with such scripts - after first hot reload of sentry.ts there is two copies of it. This is definitely just a bug.

Suggested solution

Fix dev bug, of course, and somehow split out html-referenced scripts into differrent chunks, referenced directly from html.

Currently, similar behavior can be achieved via manualChunks:

rollupOptions: {
    output: {
        manualChunks: id => {
            if (id.endsWith('/sentry.ts'))
                return 'sentry'
        }
    }
}

Senty goes into different chunk and there is module preload link for it. But I'm not sure if execution order will always be strictly same as if in separate script tags (in my case it did, but who knows for another cases...), so may be it worth to implement in vite itself.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.