Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: pre transform direct imports before requests hit the server #5037

Merged
merged 2 commits into from
Sep 23, 2021

Conversation

yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Sep 22, 2021

Currently Vite only transforms a file (i.e. go through the plugin pipeline) when the file is requested. This ensures only files actually used on the current page are transformed, however it also creates a problem with deeply nested import chains:

A --> B --> C

B is only requested when A is evaluated in the browser (triggering the import request to B). Similarly C is only requested after B is evaluated in the browser. The problem becomes more obvious when there are many modules being loaded in parallel - since the browser typically can only handle 6 parallel requests so it will hold off some requests until previously pending requests have resolved (HTTP/2 requires HTTPS which in fact make things slower). This causes requests to hit the server at a delayed rate so the server is in fact under-utilized and waiting for the browser. The deeper the import chain and the more modules are loaded in parallel, the more obvious the problem is.

Since Vite already performs import analysis when transforming each module, we can in fact start transforming all direct imports of a module before even sending back the response. This essentially means Vite will be eagerly compiling the non-lazy-imported sub graph of the application without waiting on network requests. When the requests come in, they can pick up the already initiated transform Promise (can be pending or already resolved).

I did some synthetic benchmarking here:

D2/C5/T31 D3/C7/T400 D4/C4/T341 C1/C100/T101 D4/C8/T4681
Base 157ms 778ms 727ms 282ms 8092ms
Post Optimization 112ms (-28.6%) 321ms (-58.7%) 305ms (-58%) 142ms (-49.6%) 2414ms (-70.2%)

D = layers of nested imports / C = parallel imports per file / T = total number of modules loaded


Tests are passing but this may have subtle implications in real world cases, so we should put it in a beta and test it in some projects to make sure it doesn't break anything.

@yyx990803 yyx990803 changed the title Pre transform direct imports before requests hit the server feat: pre transform direct imports before requests hit the server Sep 22, 2021
@yyx990803 yyx990803 added the p4-important Violate documented behavior or significantly improves performance (priority) label Sep 23, 2021
@patak-dev patak-dev merged commit 57b9a37 into main Sep 23, 2021
@patak-dev patak-dev deleted the feat/pre-transform branch September 23, 2021 11:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p4-important Violate documented behavior or significantly improves performance (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants