Nuxt 3 (Vite) Changes Almost All Output File Names For Small Change

[Huseyin-Yilmaz-98]

Nuxt 3 (Vite) Changes Almost All Output File Names For Small Change

[danielroe]

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.

[Huseyin-Yilmaz-98]

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.

[Huseyin-Yilmaz-98]

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?

[manniL]

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)

[github-actions]

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:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[Huseyin-Yilmaz-98]

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)

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.

[manniL]

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 👍🏻

[Huseyin-Yilmaz-98]

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.

[Huseyin-Yilmaz-98]

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.