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

perf(css): cache lazy import #12721

Merged
merged 3 commits into from
Apr 3, 2023

Conversation

sapphi-red
Copy link
Member

Description

Similar to vitejs/vite-plugin-react#141.
compileCSS function 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?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the PR Title Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@sapphi-red sapphi-red added p2-nice-to-have Not breaking anything but nice to have (priority) performance Performance related enhancement labels Apr 3, 2023
@stackblitz
Copy link

stackblitz bot commented Apr 3, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Comment on lines 1062 to 1072
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
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

@sapphi-red sapphi-red Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

postcss is not bundled but postcss-modules and postcss-import are bundled.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah right, let's keep it as-is then to make it simple 😄

@patak-dev patak-dev merged commit fedb080 into vitejs:main Apr 3, 2023
@sapphi-red sapphi-red deleted the perf/css-cache-lazy-import branch April 4, 2023 06:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p2-nice-to-have Not breaking anything but nice to have (priority) performance Performance related enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants