Mi compilación de producción tiene un solo archivo js grande de 2 MB. Lighthouse muestra que la mitad no se usó durante una renderización. Me encantaría dividirlo en trozos más pequeños.

Versiones:

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

Ya he anotado las rutas:

 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 prohíbe los fragmentos en este momento:

configureWebpack: { devtool: 'source-map', optimización: { splitChunks: false, },

Intenté modificarlo de acuerdo con el documento Webpack , por ejemplo.

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

Y el resultado no fue de mucha ayuda:

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

Solía tener más de 30 trozos hace un año. No hay una confirmación relevante en la configuración del paquete web, por lo que probablemente sea una consecuencia de alguna actualización de la biblioteca.

 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

Este es mi punto final: https://www.mezinamiridici.cz/ y fuentes .

¿Cómo puedo minimizar la carga inicial de mi sitio web para que solo se obtengan los scripts necesarios?