N
Nuxt•2mo ago
AlexanderKim

How to correctly use manualChunks in nuxt.config.ts (nuxt 3.15.4)

  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: (id: string) => {
            console.log('manualChunks function called with id:', id)
            
            if (id.includes('@sentry/nuxt')) {
              return 'sentry'
            }

            return undefined
          },
        },
      },
    },
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: (id: string) => {
            console.log('manualChunks function called with id:', id)
            
            if (id.includes('@sentry/nuxt')) {
              return 'sentry'
            }

            return undefined
          },
        },
      },
    },
  },
never seen a console output, nor a chunk named sentry when running npm run build
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @AlexanderKim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, Nuxt 3 (including version 3.15.4) allows you to customize Vite's Rollup options in your nuxt.config.ts under the vite.build.rollupOptions key. This includes the ability to set a custom manualChunks function for advanced code splitting. However, there are a few important considerations: 1. Nuxt's Build Abstraction: Nuxt abstracts much of the build process, and not all Vite/Rollup options are guaranteed to be respected or behave as in a plain Vite project. The documentation for Nuxt 4.x migration notes that "most of your previous build configuration in nuxt.config will now be ignored," and you should use the new top-level vite, webpack, and postcss keys for configuration. But even then, some deep customizations may not be fully supported or may be overridden by Nuxt's internal logic Docs: Migration - Build Tooling. 2. No Evidence of manualChunks Working as Expected: In the provided knowledge sources, there are references to chunking and Rollup options, including a warning about large chunks and a suggestion to use manualChunks Stack Overflow: Nuxt3 build .output folder remains empty, nothing copied from .nuxt. However, there is no explicit confirmation that a custom manualChunks function is called or respected during the Nuxt build process. There is also no mention of console output from such a function, nor examples of successful custom chunk naming. 3. Possible Internal Handling: There are several references to internal changes and fixes related to chunk naming and Rollup integration in Nuxt (e.g., using chunk.names instead of name PR #30780), but these do not clarify whether user-defined manualChunks functions are supported or how to debug them. Summary:
The knowledge sources do not explicitly confirm that Nuxt 3.15.4 will call your custom manualChunks function or that you will see console output from it. It's possible that Nuxt's build abstraction prevents this function from being used as it would in a plain Vite/Rollup setup. If you need fine-grained control over chunking, you may encounter limitations. If you are not seeing your function called or the expected chunk output, this is likely due to Nuxt's internal build process not exposing or using the manualChunks function as you would expect. There is no documented workaround or official support for this in the provided sources. If this feature is critical for your project, consider opening an issue on the Nuxt GitHub repository or checking for updates in the official documentation as Nuxt's Vite integration continues to evolve. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@349254666296492032> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
AlexanderKim
AlexanderKimOP•2mo ago
can you search for existing github issues regards manualChunks ?

Did you find this page helpful?