vite-plugin-vue icon indicating copy to clipboard operation
vite-plugin-vue copied to clipboard

Allow user decide which npm deps should be cached by browser

Open windsonR opened this issue 11 months ago • 3 comments

Description

The feature allow browser to cache npm deps deps is very useful, but it has a problem like this repo

reproduction steps:

  1. Download repo and pnpm install
  2. Start vite dev-server
  3. In browser, access http://localhost:5173/
  4. wait for page loaded
  5. make sure devtools=>Network=> disable cache not checked!
  6. restart vite dev-ser
  7. 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

windsonR avatar Mar 16 '24 07:03 windsonR

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.

sapphi-red avatar Mar 16 '24 16:03 sapphi-red

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?

windsonR avatar Mar 17 '24 15:03 windsonR

At present, I can only temporarily solve this problem by disabling the browser cache

windsonR avatar Mar 17 '24 15:03 windsonR