Skip to content

Implement enableDevCache option in Vite plugin #1591

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

hartz89
Copy link

@hartz89 hartz89 commented May 20, 2025

Addresses issue #1488

This PR implements an enableDevCache option in @vanilla-extract/vite-plugin which helps alleviate dev server performance issues in large projects caused by redundant .vanilla.css file loading.

I made this an option rather than a default because there is an obvious trade-off here: adding these filesystem and hashing operations incurs cost, so the default / false setting is likely faster in small projects. But in large projects, this seems worthwhile.

It cut my cold start load times by about 25%. I think the performance improvement would've been bigger if I hadn't already added sprinkles and recipes runtime imports to optimizeDeps.include- they were causing some HMR churn on startup so it made the duplicate imports more costly.

Implements an `enableDevCache` option in the Vite plugin which helps alleviate dev server performance issues in large projects caused by redundant `.vanilla.css` file loading
Copy link

changeset-bot bot commented May 20, 2025

🦋 Changeset detected

Latest commit: c246505

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@vanilla-extract/vite-plugin Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -217,9 +266,10 @@ export function vanillaExtractPlugin({
}

for (const file of watchFiles) {
const normalizedFilePath = normalizePath(file);
Copy link
Author

Choose a reason for hiding this comment

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

I wasn't sure if I should put the invalidation check before or after the "add watch file" block, or how these blocks might affect one another. Let me know if you have thoughts.

return true;
}

const hash = await getFileHash(moduleId);
Copy link
Author

@hartz89 hartz89 May 21, 2025

Choose a reason for hiding this comment

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

Is the hashing step just a waste of CPU time? Should we just use the file contents as the values of the map? Hashing CPU time is a trade-off for cache memory usage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant