My production build has a single 2 MB large js file. Lighthouse shows that a half of it was not used during a rendering. I would love to split it into smaller chunks.

Versions:

"@vue/cli-service": "^4.5.14",
  "peerDependencies": {
    "webpack": "^4.0.0"
  }

I have already annotated the routes:

component: () => import(/* webpackChunkName: "user-chunk" */ './views/user/SignUp.vue'),
component: () => import(/* webpackChunkName: "content-chunk" */ './views/item/Blog.vue'),
component: () => import(/* webpackChunkName: "admin-chunk" */ './views/poll/CreatePoll.vue'),

vue.config.js forbids the chunks at this moment:

configureWebpack: { devtool: 'source-map', optimization: { splitChunks: false, },

I tried to modify it according Webpack doc, e.g.

splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,

And the result was not much helpful:

dist\js\chunk-vendors.ce439fb4.js                             1528.75 KiB                                                                         419.19 KiB
dist\js\app.4d6fd109.js                                       604.22 KiB                                                                          114.19 KiB

I used to have over 30 chunks a year ago. There is no relevant commit in the webpack configuration so this is probably a consequence of some library upgrade.

dist\js\chunk-vendors.37407f10.js 1257.82 KiB 364.55 KiB
dist\js\app.9a0c381b.js 65.89 KiB 20.44 KiB
dist\js\chunk-73c49296.3fc6218f.js 44.71 KiB 10.08 KiB
dist\js\chunk-581504f2.0a864656.js 16.44 KiB 4.96 KiB

This is my endpoint: https://www.mezinamiridici.cz/ and sources.

How can I minify the initial load of my website so only the neccessary scripts are fetched?