vite-plugin-vue
vite-plugin-vue copied to clipboard
Allow user decide which npm deps should be cached by browser
Description
The feature allow browser to cache npm deps
deps is very useful, but it has a problem like this repo
reproduction steps:
- Download repo and
pnpm install
- Start vite dev-server
- In browser, access
http://localhost:5173/
- wait for page loaded
- make sure
devtools=>Network=> disable cache
not checked! - restart vite dev-ser
- wait for browser load page
Browser page will display errors.
Suggested solution
When send cached request, allow user define a callback or RegExp to disable some npm deps' cache
A possibly implementation:
defineConfig({
server:{
npmCacheStrategy(url){
return url.indexOf('?')<0
}
}
})
Alternative
No response
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Since demo
is a dependency, demo.vue
gets cached and it doesn't hit the server. But plugin-vue expects demo.vue
to be processed before demo.vue?vue&type=script
and it skips the transform.
https://github.com/vitejs/vite-plugin-vue/blob/2050ad3dc568b4d051d19611aad34693e9a917ec/packages/plugin-vue/src/index.ts#L254
Specifically, this condition is false
.
Both @vitejs/plugin-vue
and @vitejs/plugin-vue2
plugins have this issue.
If it fix in the plugins, you may need to add a fallback when loading the script(demo.vue?vue&type=script
) to check if the corresponding Vue file(demo.vue
) has already been loaded?
In my opinion, controlling Cache Control
on certain files may be simpler and more adaptable to different situations?
At present, I can only temporarily solve this problem by disabling the browser cache