Comments (9)
You are exactly right. This is a limitation of vite, because all the chunks are listed in the entry file. So if any of the chunks import the entry, their hashes update too.
There might be something more we can do here but maybe not. I'll take a little look.
from nuxt.js.
During production releases, we keep the old instances and the new ones alive at the same time for a couple of minutes to make sure that not all users will go to the new build in case there are any problems with the new one. During that period, the users who load the old build have no problems because the old build files are all cached in the CDN, however the new build users get 500 errors if any of the files they try to fetch has not been cached yet and if the Cloudfront request goes to one of the old instances instead of the new ones.
With Nuxt 2, we could ignore this because usually only 20-30 (maybe 100 at max if we were releasing a major update) were renamed so only a couple of users would have problems. But now, regardless it's a minor code change or not, we will have ~400 files that are not in cache.
Honestly, if we knew Vite had this problem, we would have kept using Webpack after the upgrade but we have been testing with Vite for weeks and only realized this problem right before releasing the Nuxt 3 upgrade. Because of the huge Webpack testing effort now, I am trying to find any possible fix for Vite that will decrease the number of changed files as much as possible.
from nuxt.js.
![image](https://private-user-images.githubusercontent.com/50533937/343856424-7073a508-f372-4bc5-b56b-b767860d6802.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM2NjUxNzYsIm5iZiI6MTcyMzY2NDg3NiwicGF0aCI6Ii81MDUzMzkzNy8zNDM4NTY0MjQtNzA3M2E1MDgtZjM3Mi00YmM1LWI1NmItYjc2Nzg2MGQ2ODAyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE0VDE5NDc1NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQzNDQwOGE3NTFhOTM3N2RhMjRhZTQ5NWZmODM4MGNmY2ZkMWFhNjk5ODEzNDlmOWU3MWU4ZDhlYmNmNzk4NDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Y_CAmou8dDsXeCshI260W36qwQMH3Bf9rSc92CEyCuw)
Could the entry file be the cause of the problem here? There is an array called __vite__fileDeps
at the beginning of the entry file which contains all chunk names. And the chunk files start with a line like import {_ as n, t as c, v as _, L as r} from "../entry/Cx7qvxDe.js";
. So is it possible that when any of the chunks are modified, it causes the contents of the entry file to be modified because of the __vite__fileDeps
array and then when the entry file is renamed, it causes the other chunks to be renamed. If this is the problem, then what would be the solution?
from nuxt.js.
This has been a topic recently, see e.g. #25133 and should be better with the latest release. Do you have a small reproduction showcasing files that are not related to the change being updated?
Think of Component MyComp.vue
in pages/a.vue
. Having e.g. pages/b.vue
should stay unchanged when changing MyComp
(while a.vue and the component file shouldn't)
from nuxt.js.
Would you be able to provide a reproduction? 🙏
More info
Why do I need to provide a reproduction?
Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.
What will happen?
If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.
If needs reproduction
labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.
How can I create a reproduction?
We have a couple of templates for starting with a minimal reproduction:
👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox
A public GitHub repository is also perfect. 👌
Please ensure that the reproduction is as minimal as possible. See more details in our guide.
You might also find these other articles interesting and/or helpful:
from nuxt.js.
This has been a topic recently, see e.g. #25133 and should be better with the latest release. Do you have a small reproduction showcasing files that are not related to the change being updated?
Think of Component
MyComp.vue
inpages/a.vue
. Having e.g.pages/b.vue
should stay unchanged when changingMyComp
(while a.vue and the component file shouldn't)
I am aware of the recent changes. I had to upgrade from Nuxt 3.11.2 just because of that. Before the upgrade, most of the file names would change even without making any code changes. Right now, as long as the code remains the same, it creates the exact same bundle, however, still any change causes more than half of the files to be updated.
In my pages/index.vue
files, I have this code:
<ClientOnly>
<BookingSocketWrapper v-if="isLoggedIn()">
<BookingTouchPoint v-if="replacements" :replacements="replacements" />
</BookingSocketWrapper>
</ClientOnly>
This is an async component:
components: {
Welcome,
Banners,
BlogCategoriesSection,
BookingSocketWrapper,
BookingTouchPoint: defineAsyncComponent(() => import('@/components/HomeSections/BookingTouchPoint')),
ServiceShortcuts,
ActiveServices,
FeaturesSection,
InsuranceSection,
TestimonialsSection,
MobileAppDownloader
},
All I have to do is add this to the BookingTouchPoint
:
mounted() {
console.log('test')
}
And just this change is enough for 432 out of 700 bundle file names to be changed. I have hundreds of components and pages and the homepage is the only place where this component is loaded.
I cannot provide the full code because this is a production project but let me try creating a new project and reproduce it.
from nuxt.js.
I cannot provide the full code because this is a production project but let me try creating a new project and reproduce it.
That's fine. Let me know when a repro is up 👍🏻
from nuxt.js.
I cannot provide the full code because this is a production project but let me try creating a new project and reproduce it.
That's fine. Let me know when a repro is up 👍🏻
Here is a demo: https://github.com/Huseyin-Yilmaz-98/nuxt3-build-demo/tree/main
There are two output folders here and the only code difference between them is I changed the line in components/B.vue
from console.log('1')
to console.log('2')
. And as you can see, just this change caused every single file under public/_nuxt/chunk
and public/_nuxt/entry
to be renamed. Only the CSS files remain the same.
from nuxt.js.
I have just added the same outputs with Webpack as well. As you can see, unlike Vite, Webpack did not rename all files, but just a few of them.
from nuxt.js.
Related Issues (20)
- useFetch returns null used in component when on parent data is loaded via composable useFetch on route watch HOT 5
- Unusaual page reload after creating file in server event handler HOT 1
- Package manager order in docs/getting-started/installation HOT 2
- Useless sourcemaps generated during production build
- useSEOMeta or useHead, og tag dynamic assigned by requests can't not be fetch by FB or LINE sharing HOT 6
- After importing the @ nuxtjs/i18n module, the automatically imported function cannot find the type declaration in the template HOT 1
- Nuxt3.12.0 cant use nuxt-socket-io HOT 2
- hooks not called HOT 2
- Cannot read properties of undefined (reading 'replace') HOT 4
- protocol relative `cdnUrl` creates prerendering errors HOT 2
- cloudflare-pages does not generate static pages HOT 3
- SWR Cache saving headers HOT 2
- Nuxt $fetch throws exception when accessing API with subdomain HOT 2
- [SSG] Implement Route-Based Dynamic SEO Meta Tags in SSG HOT 4
- [Docs]: vue-tsc version are different in actual .md file and docs site HOT 1
- Creating new Nuxt 3 project results in multiple issues on Windows 10 HOT 2
- Change .env file does not update runtimeConfig HOT 1
- Route Groups not working HOT 2
- the unscoped css in a layout remains even after changing the layout in dev `nuxt dev` HOT 1
- useSeoMeta does not work anymore on dynamic link once the project is generated
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.js.