référence:
https://www.jianshu.com/p/6262772bdc9c
https://blog.csdn.net/qq_40460909/article/details/100038778
https://blog.csdn.net/qq_19666289/article/details/95330025
Plein de projets de développement de la joie Vue presque terminée lorsque les testeurs ont été trouvées des charges lentes, comme la constipation dans l'application, sans défense à optimiser, et a commencé à la recherche de différentes façons!
Ce qui suit est un résumé de certaines méthodes d'optimisation de ma propre:
1. Route lazy loading
Cette méthode app.js initialement emballé dans un fichier séparé en une pluralité de fichiers de l'emballage, cela permettra de réduire la taille d'un fichier unique, mais ne réduit pas la taille des js dossier entier. la demande de charge peut se faire de cette façon, il suffit de charger le fichier js une seule page.
2. Les composants de chargement asynchrone
maison de chargement, ils peuvent donner des paramètres de composants enfant à domicile v-if = « false », lors de l'initialisation de la page pour donner le sous-ensemble est défini sur true, cette méthode utilise un inerte v-si ce, setTimeout sera sous-ensemble tous les composants montrent après l'initialisation est terminée et initialiser ses sous-composants.
Remarque: Dans le développement réel a également rencontré un autre cas peut également utiliser cette solution pour obtenir un js app jeton à l'entrée, mais il a été trouvé dans créé ou monté en sont parfois en mesure d'obtenir la page spécifique jeton, parfois ne peut pas, à cause de l'ordre d'exécution doit être mis à zéro par cette fois méthode setTimeout utilisée dans la méthode de la demande de jeton au fond de la file d'attente, afin que nous puissions garantir le processus de demande a le jeton.
3. L'utilisation de composants asynchrones, le chargement de la demande
newVue({
// ...
Composants: {
'My-composante': () => import ( './ my-async-composante')
}
})
libellé ES6, `renvoie la fonction objet Promise` A` Par importation. Cette prise de conscience de la charge de la demande de composants, il faut du temps se charge de cette composante, il est aussi une façon de plier l'optimisation de la vitesse de chargement.
Les deux images suivantes vous pouvez bien comprendre les différents « ./xxx.vue » et méthode d'importation (), avec la fonction d'importation et les avantages découlant de xxx de l'importation.
Les méthodes ci-dessus deux, après l'emballage du fichier résultant, la méthode de fonction d'importation est clair très un peu plus js, qui est séparée de la app.js d'origine dans 0.js, 1.js, 2.js. Le premier chiffre, au moment de l'exécution sera app.js toute chargement terminé, tandis que le second graphique chargera 0.js + app.js, bien que plus d'un fichier, mais en fait, ce dernier une charge toute la taille du fichier beaucoup plus petit que l'original. Ceci est la demande de charge, il sera chargé en cas de besoin 1.js, et une fois après le chargement sera mis en cache localement, la prochaine charge prendra les fichiers mis en cache.
En outre, étant donné que la fonction d'importation renvoie une promesse est l'objet, il est possible d'utiliser les méthodes puis se promettre () et les prises () pour surveiller l'ensemble du chargement, tels que:
4. quantité image de temps peut être chargé par lots
bouchon vue-lazyload, des images de chargement paresseux
5. externe introduire certains plug-ins, de ne pas introduire dans la vue
Inclus, je utile moment.js ce plug-in temps de projet, après l'introduction de l'intérieur emballé la taille du projet vue de l'introduction des produits emballés avec la manière src autour de l'extérieur d'un grand 300k.
Tout d'abord, télécharger moment.min.js bon paquet, puis ajoutez ce code sous la flèche pointe dans webpack.base.conf.js vue du projet
Après avoir ajouté le code à la figure moment.js ne doit pas être emballé dans les js.
La dernière étape, vous venez de télécharger empaquettent moment.min.js manuellement dans le fichier index.html emballé.
Note: Cette méthode est vraiment utile, si la crainte du dossier complet du projet est trop grand, il peut également être introduit par la méthode de cdn: https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js
Il est important: après les deux points nom majuscule est le nom du projet et notre propre définition à utiliser dans des noms tels que: « vue »: « Vue », ce dernier doit être cohérent et projet Vue.
Auteur: zx une graisse
lien: https: //www.jianshu.com/p/6262772bdc9c
Source: Jane livres
sont la propriété de l'auteur. réimpression commerciale s'il vous plaît contacter l'auteur autorisé, réimpression non commerciale s'il vous plaît indiquer la source.