🌿 Nuxt.js Intermediate

How does Nuxt.js handle code splitting?

Answer

Nuxt.js performs automatic code splitting by generating a separate JavaScript chunk for each page in the pages/ directory. This means users only download the code for the page they are currently viewing, reducing the initial bundle size. Nuxt uses Vite (or optionally Webpack) for bundling, which leverages native ES module dynamic imports. Nuxt's component lazy loading feature further reduces bundle size: prefixing a component with Lazy (e.g., <LazyHeavyComponent />) converts it to a dynamic import. You can also manually split code using Vue's defineAsyncComponent(). The Nuxt DevTools show bundle analysis to help identify large chunks.