perf(css): cache lazy import #12721
perf(css): cache lazy import #12721
Conversation
sapphi-red
added
p2-nice-to-have
|
|
| function lazyImport<T>(name: string, imp: () => Promise<T>): T | Promise<T> { | ||
| const cached = lazyImportCache.get(name) | ||
| if (cached) return cached | ||
|
|
||
| const promise = imp().then((module) => { | ||
| lazyImportCache.set(name, module) | ||
| return module | ||
| }) | ||
| lazyImportCache.set(name, promise) | ||
| return promise | ||
| } |
There was a problem hiding this comment.
Incredible how much we'll gain because of this, great find!
About the name, maybe cachedImport would be more clear here. And being general about the imp is interesting but we could directly call import(name) inside to avoid creating the imp function every time it is called?
There was a problem hiding this comment.
+1 for cachedImport
For import(name) I guess you need to pass it as literal so that bundler and typescript can infer it. So I think the current implementations LGTM.
There was a problem hiding this comment.
I don't think we need import(name) since Vite isn't being bundled, and I don't think Vite can be bundled now too due to some constant fs paths. We're already specifying deps dynamically with the requireResolveFromRootWithFallback util, so something like cachedImport('postcss') would be fine by me too.
There was a problem hiding this comment.
postcss is not bundled but postcss-modules and postcss-import are bundled.
There was a problem hiding this comment.
Ah right, let's keep it as-is then to make it simple 😄
Description
Similar to vitejs/vite-plugin-react#141.
compileCSSfunction was taking 500ms with my project and was cut down to 300ms with this change.Additional context
What is the purpose of this pull request?
Before submitting the PR, please make sure you do the following
fixes #123).