Using router-module, my app doesn't seem to chunk pages as it did previously. What am I missing?

unr
20
unr
commented a year ago

I assume there is an undocumented portion of implementing router-module that I'm missing, to restore proper chunking functionality to my app.

When we use nuxt's magic routing, we're given all our pages as individual chunks.

When building the same page structure using router-module, I'm only seeing vendor/common chunking, while all pages are bundled up into main.js

--

Is there some config in router-module I'm missing? Is this a bug, I should make a formal report for?

I assume I need to extend webpack, and include my own list of routes to chunk…

Likely implementing the nuxt router.js in a similar way myself… right?

0
unr
20
unr
commented a year ago

Ah, with some more exploration, I've figured it out!

I needed to import them, with a webpack chunk name. Which was handled by the original nuxt router.js


By simply changing my imports, chunking seems to be returned. 👍

Originally, I was trying to import like so

import Homepage from '~/pages/Homepage.vue';

Instead, this will import the Homepage component, and chunk it as pages/Homepage

const Homepage = () => import('~/pages/Homepage.vue' /* webpackChunkName: 'pages/Homepage' */).then(m => m.default || m);
1
unr
20
unr
commented a year ago

An example build, using router-module

All the routes are the same, but not being chunked here.

Hash: ed95697267f7d9c08a69
Version: webpack 4.17.1
Time: 48100ms
Built at: 09/13/2018 2:25:10 PM
                            Asset      Size  Chunks                    Chunk Names
  local.0.d2e7621f367356821a85.js  87.4 KiB       0  [emitted]         lang-en
  local.1.2527a4f2367619ad230e.js  96.5 KiB       1  [emitted]         lang-es
  local.2.6a5b8157e47f55082dc7.js  56.3 KiB       2  [emitted]         lang-ko
  local.3.1ccdf387c94e8a3f494d.js  93.9 KiB       3  [emitted]         lang-pt
  local.4.6d5f4a3c46df965a145c.js  97.9 KiB       4  [emitted]         lang-ru
  local.5.6ca4c2b1ca666a03faad.js  44.5 KiB       5  [emitted]         lang-zh
local.app.e7ba923b6300e4b587e2.js  1.33 MiB       6  [emitted]  [big]  main
  local.7.05653050ea2d6b8b48ed.js   163 KiB       7  [emitted]         commons.main
  local.8.18a26ab7ec1b49294ea4.js   614 KiB       8  [emitted]  [big]  vendors.main
                         LICENSES  2.81 KiB          [emitted]
 + 3 hidden assets
Entrypoint main [big] = local.7.05653050ea2d6b8b48ed.js local.8.18a26ab7ec1b49294ea4.js local.app.e7ba923b6300e4b587e2.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  local.app.e7ba923b6300e4b587e2.js (1.33 MiB)
  local.8.18a26ab7ec1b49294ea4.js (614 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance.
Entrypoints:
  main (2.09 MiB)
      local.7.05653050ea2d6b8b48ed.js
      local.8.18a26ab7ec1b49294ea4.js
      local.app.e7ba923b6300e4b587e2.js

Meanwhile, before using router-module.

Hash: 345c900677e59338d21c
Version: webpack 4.17.1
Time: 56252ms
Built at: 09/13/2018 2:27:15 PM
                            Asset       Size  Chunks                    Chunk Names
 local.37.fb801f04cbe109a15cc2.js  829 bytes      37  [emitted]         pages/preview
  local.0.04735eddef3285e1e983.js   89.4 KiB       0  [emitted]         vendors.pages/academy.pages/esports-teams/_game/_team.pages/esports-tournaments/_game/_series/_event.d7e5dadd
  local.2.85d1ee0c07f36f495ec0.js   28.3 KiB       2  [emitted]         pages/index.pages/matches/_game/_page.pages/matches/all/_page
  local.3.fa4b68151d25af2d0e6a.js   23.1 KiB       3  [emitted]         pages/esports-teams/_game/_team.pages/esports-tournaments/_game/_series/_event.pages/esports-tournam.4456d72a
  local.4.ac51f28e1e3c015be558.js   25.9 KiB       4  [emitted]         pages/account/accept-terms.pages/account/identity.pages/account/index
  local.5.87607ebe5dae07d3eac6.js   15.2 KiB       5  [emitted]         pages/esports/game/_game/_page.pages/esports/index.pages/esports/latest/_page
  local.6.bc5af71562a9ead6bc4d.js   21.4 KiB       6  [emitted]         pages/esports-teams/_game/index
  local.7.1bd692c2020ce2e500be.js   79.7 KiB       7  [emitted]         pages/match/_game/_eventname/_matchid/index
  local.8.cde389597a6eced09715.js   87.4 KiB       8  [emitted]         lang-en
  local.9.e61081906e4ad8827cc1.js   96.5 KiB       9  [emitted]         lang-es
 local.10.94a8889dc64ac48220d0.js   56.3 KiB      10  [emitted]         lang-ko
 local.11.8b7f7807a94b18e53d60.js   93.9 KiB      11  [emitted]         lang-pt
 local.12.098f8269966e37498b16.js   97.9 KiB      12  [emitted]         lang-ru
 local.13.e4b2a7fc00fc61d74d36.js   44.5 KiB      13  [emitted]         lang-zh
 local.14.46c325f3ca2a9ce686fa.js   23.3 KiB      14  [emitted]         pages/esports-tournaments/_game/_series/_event.pages/esports-tournaments/_game/_series/index
 local.15.40503dc03c4c35651d46.js   17.6 KiB      15  [emitted]         pages/esports-tournaments/_game/index.pages/esports-tournaments/index
 local.16.351730983298ead8a025.js   16.9 KiB      16  [emitted]         pages/account/deposit/index.pages/account/index
 local.17.482567ff5b14f0b3b9fa.js   11.7 KiB      17  [emitted]         pages/account/identity.pages/account/index
local.app.b19e1afdb6ebf3b46b79.js    475 KiB      18  [emitted]  [big]  main
 local.19.1867f52970ae36faeafa.js   14.2 KiB      19  [emitted]         pages/vip
 local.20.e1a894ab87e1055769c1.js   3.02 KiB      20  [emitted]         pages/vip-terms
 local.21.a8e1eff0862250e3a60a.js   12.3 KiB      21  [emitted]         pages/support
 local.22.54f5c4f929126a5ffbff.js   1.36 KiB      22  [emitted]         pages/unsubscribe
 local.23.5ad3b1ca2e24480821f3.js   16.2 KiB      23  [emitted]         pages/esports-teams/index
 local.24.67d890f70ce9a10b9b5a.js   3.01 KiB      24  [emitted]         pages/responsible-gambling
 local.25.9af1538091075638a6bb.js    114 KiB      25  [emitted]         pages/live
 local.26.9df4f685ebe241964516.js   15.2 KiB      26  [emitted]         pages/brand-assets
 local.27.4f0163375d5bbca7f6fa.js    3.7 KiB      27  [emitted]         pages/bet-rules
 local.28.b86afe8a058c84416882.js  351 bytes      28  [emitted]         pages/ping
 local.29.4c3827a539422fb4b335.js   1.89 KiB      29  [emitted]         pages/reset-password
 local.30.389ee3ba43d02f099eba.js   7.81 KiB      30  [emitted]         pages/esports-tournaments/index
 local.31.8653bb8f0a678e9b0074.js   34.2 KiB      31  [emitted]         pages/account/index
 local.32.a23a9caa71d978d0e0bc.js   3.65 KiB      32  [emitted]         pages/forgot-password
 local.33.f98cfd58a49db64205a0.js   2.17 KiB      33  [emitted]         pages/privacy-policy
 local.34.1191f727b88c308be33f.js      3 KiB      34  [emitted]         pages/terms
 local.35.18274f31c43ba3c28caf.js   23.3 KiB      35  [emitted]         pages/academy
 local.36.45434d597e558ba97f40.js   7.02 KiB      36  [emitted]         pages/banned
  local.1.96231645d49c72cb2207.js     69 KiB       1  [emitted]         pages/index.pages/match/_game/_eventname/_matchid/index.pages/match/_id.pages/matches/_game/_page.pa.4e9e9acc
 local.38.b26552400da165476084.js   22.5 KiB      38  [emitted]         pages/esports/index
 local.39.b04693a7b9785a162f2e.js   12.7 KiB      39  [emitted]         pages/affiliates/index
 local.40.663e710f4948f6cd6f10.js   11.6 KiB      40  [emitted]         pages/faq
 local.41.a6659a3b30d9e34c9c57.js   10.3 KiB      41  [emitted]         pages/partners
 local.42.8ade31cc3436e3b7b8bb.js   72.5 KiB      42  [emitted]         pages/account/vip
 local.43.df9a47d85c431275adbc.js    2.3 KiB      43  [emitted]         pages/account/unsupported
 local.44.ed44b9cfa4315b58db1d.js   12.9 KiB      44  [emitted]         pages/account/contact
 local.45.48e62861a747667c5174.js    7.4 KiB      45  [emitted]         pages/account/identity
 local.46.33a077fb9a50b6912aa3.js   37.8 KiB      46  [emitted]         pages/account/responsible
 local.47.a3fae2571143b0cf45fc.js   28.6 KiB      47  [emitted]         pages/account/refer-a-friend
 local.48.051abcef47f8e3d4833c.js   58.6 KiB      48  [emitted]         pages/account/verify
 local.49.a8967b79b16d4392ccd3.js   33.8 KiB      49  [emitted]         pages/account/withdraw
 local.50.7f9a63f734e9bef65c73.js      2 KiB      50  [emitted]         pages/account/complete
 local.51.8a6ceb6d6c7e1ac649bd.js   9.76 KiB      51  [emitted]         pages/account/accept-terms
 local.52.22e3bc3c007d1bb331d6.js   27.9 KiB      52  [emitted]         pages/account/affiliate/index
 local.53.19964d0a5bf5ae80c343.js   12.7 KiB      53  [emitted]         pages/affiliates/register
 local.54.ef8f72bef5773b8a3d18.js   69.6 KiB      54  [emitted]         pages/account/deposit/index
 local.55.446c5524487f5126ed1e.js   14.1 KiB      55  [emitted]         pages/account/affiliate/balance
 local.56.446209bf736764f18edb.js   9.74 KiB      56  [emitted]         pages/account/deposit/completed
 local.57.981979310a461f9eb3d4.js   33.2 KiB      57  [emitted]         pages/account/bet-history/_page
 local.58.3c83589796b4b48643af.js   20.3 KiB      58  [emitted]         pages/account/transaction-history/_page
 local.59.ff2adf3e5edbe63cc841.js   5.61 KiB      59  [emitted]         pages/matches/all/_page
 local.60.a4fc4469dbae7fac2227.js   9.73 KiB      60  [emitted]         pages/esports/latest/_page
 local.61.b15941210f8181282d26.js   9.89 KiB  61, 60  [emitted]         pages/esports/game/_game/_page
 local.62.d938aa798594b23510d2.js     43 KiB      62  [emitted]         pages/esports/_article
 local.63.5c4eb91e32242e0967ec.js   8.17 KiB      63  [emitted]         pages/esports-tournaments/_game/index
 local.64.2f8986c497746d8cb13f.js  228 bytes      64  [emitted]         pages/match/_id
 local.65.9af6013b1aacc338b9be.js  230 bytes      65  [emitted]         pages/esports-teams/_game/page/_page
 local.66.eddc52dccd08ef624b9b.js   10.2 KiB      66  [emitted]         pages/matches/_game/_page
 local.67.1af0896a8655ee275452.js   26.1 KiB      67  [emitted]         pages/esports-teams/_game/_team
 local.68.13ad57f87d0ce16b6345.js   7.97 KiB      68  [emitted]         pages/esports-tournaments/_game/_series/index
 local.69.1ca3d78f21a223eb7554.js   20.4 KiB      69  [emitted]         pages/esports-tournaments/_game/_series/_event
 local.70.aba642918a281d0347ea.js   5.19 KiB      70  [emitted]         pages/match/_game/_eventname/_matchid/ticker
 local.71.de1a2560627dfaddd31e.js   18.6 KiB      71  [emitted]         pages/index
 local.72.7b4d49c9874db9230136.js    163 KiB      72  [emitted]         commons.main
 local.73.be41abc3b67f4b9e0d0f.js    508 KiB      73  [emitted]  [big]  vendors.main
                         LICENSES   2.81 KiB          [emitted]
 + 3 hidden assets
Entrypoint main [big] = local.72.7b4d49c9874db9230136.js local.73.be41abc3b67f4b9e0d0f.js local.app.b19e1afdb6ebf3b46b79.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  local.app.b19e1afdb6ebf3b46b79.js (475 KiB)
  local.73.be41abc3b67f4b9e0d0f.js (508 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance.
Entrypoints:
  main (1.12 MiB)
      local.72.7b4d49c9874db9230136.js
      local.73.be41abc3b67f4b9e0d0f.js
      local.app.b19e1afdb6ebf3b46b79.js
0
unr
20
unr
commented a year ago

Ah, with some more exploration, I've figured it out!

I needed to import them, with a webpack chunk name. Which was handled by the original nuxt router.js


By simply changing my imports, chunking seems to be returned. 👍

Originally, I was trying to import like so

import Homepage from '~/pages/Homepage.vue';

Instead, this will import the Homepage component, and chunk it as pages/Homepage

const Homepage = () => import('~/pages/Homepage.vue' /* webpackChunkName: 'pages/Homepage' */).then(m => m.default || m);
1
Informations
QuestionResolved
#c22 - Created a year ago