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?
