Le composant paresseux dans vue / webpack semble être faux ou je manque de confusion sur les termes.
Pour effectuer un chargement paresseux du composant, j'utilise le mot-clé import et webpack doit diviser ce composant en sepeate bundle, et quand j'ai besoin de charger ce composant, webpack devrait s'en occuper et charger le composant.
mais en fait, webpack crée un fichier sperate, mais il est chargé quand même lorsque l'application est en cours d'exécution. ce qui est inattendu.
Par exemple, je crée simplement une application vue simple (en utilisant le cli) et navigue jusqu'à localhost: 8080 / et la page à propos doit être chargée (par défaut) en utilisant le mot-clé import .
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
Donc, c'est par conception? Je charge à chaque fois le fichier dont je n'ai pas besoin pour le moment (la page à propos). et si j'ai 200 pages, quand je vais chercher 200 fichiers dont je n'ai pas besoin. comment ça se termine? qu'ai-je enregistré ici en utilisant la clé import ?
Dans vuetify par exemple, ils utilisent la clé import , mais les fichiers sont quand même chargés et non à la demande.
3 Réponses :
Si vous faites référence au modèle d'application par défaut de Vue CLI, vous observez en fait le prefetch de la page À propos, destiné à réduire les temps de chargement des pages que l'utilisateur visitera probablement.
Si vous voulez éviter cette optimisation des performances, utilisez cette configuration Vue:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch')
config.plugins.delete('preload')
}
}
Pour plus d'informations sur le dépannage, le panneau Réseau de Chrome comprend un colonne Initiator , qui fournit un lien cliquable vers le fichier source qui a déclenché l'appel réseau. Dans ce cas de about.js , le fichier source ressemble à ceci:
essayez d'utiliser vue-lazyload peut-être que cela peut aider et pour < script> balises que vous pouvez essayer async différer cela aide à optimiser la vitesse du site Web
Vous pouvez également éviter la prélecture des composants en utilisant l'un des commentaires "magic" du webpack ( https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules ), par exemple
components: {
MyComponent: () => import(/* webpackPrefetch: false */ './MyComponent.vue')
}
N'hésitez pas à en savoir plus sur cette optimisation de Vue ci-dessous:
C'est possible, il vous suffit de le configurer. blog.logrocket.com/lazy-loading-in-vue-js
vous pouvez voir Im utilisant le mot-clé d'importation dans la route à propos.