Code splitting not working with router.js

[ajoliveau]

Hey,

I need to use a custom router.js, but what I found was that Nuxt doesn't bundle different chunks for different pages when it's enabled. Here's an example repo : https://github.com/ajoliveau/nuxt-router-bug It's a default empty nuxt app with only "@nuxtjs/router" added and a few components to test.

When I keep it as-is with the router module commented and I go to localhost:3000/page1 this is what I see : It loads all the default JS files, and then it loads chunks depending on when they're needed (page1 at first, and page2 asynchronously because there's a NuxtLink pointing to it).

If I uncomment the router module in nuxt.config.js and I go pack to page1 (this time the dynamic page), this is what I see : No code splitting, no chunks for each page or component, it loads the whole JS of the whole application at once.

Is this normal behaviour ? Is there a way to enable code splitting when using the router-module ?

Thanks

[Scoottykun]

+1 on this, i have this issue on a large project and it really impact overall performance

[ajoliveau]

I had this problem, for what it's worth I switched to using extendRoutes in the nuxt.config.js and all the use-cases I needed in a separate router.js could be changed to fit into extendRoutes and code-splitting and everything else works fine with it.

[leofredy]

Hey guys, i find a solution.

I can use Code Splitting + @nuxtjs/router, but you need to import your page like my example router below:

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: () => import('@/views/ViewHome.vue' /* webpackChunkName: "ViewHome" */).then(view => view.default || view)
      },
    ]
  });
}

OBS: the "then" call is what nuxt would do under the hood