Optimisation du chargement du premier écran après l'empaquetage du projet vuejs et problèmes qui surviennent après l'empaquetage

Cet article présente principalement l'optimisation du premier chargement d'écran après le packaging du projet vuejs et les problèmes qui peuvent survenir après le packaging. Les amis dans le besoin peuvent s'y référer

1 : Utilisation des ressources CDN

Lorsque nous emballons, nous empaquetons les plug-ins dans l'objet de dépendances dans package.json. Nous pouvons en charger certains en utilisant cdn. Par exemple, nous ne le faisons pas. voulez charger vue, axios, vuex , vue-router est intégré à notre projet, nous avons besoin de ceci :

1 : Ouvrir webpack.base.conf.js

module.exports = {
   externals: {
    ‘vue‘: ‘Vue‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘,
    ‘vue-router‘: ‘VueRouter‘
 }
}

2 : Ouvrir routeur/index.js. Déconnectez-vous des deux lignes suivantes

//import Vue from ‘vue‘
//Vue.use(Router)

3 : Si vous utilisez vuex, déconnectez-vous de Vue.use (Vuex) dans vuex/index.js (nommé différemment)

Vue.use(Vuex)

Problèmes possibles après emballage

1 : Les éléments entourés de keep-alive ne peuvent pas être affichés

Raison : Inconnue pour l'instant.

Solution : Pas besoin de rester en vie

Lecture recommandée : Le projet Vue utilise CDN pour optimiser le premier problème de chargement d'écran

Ce qui précède est ce que j'ai compilé pour tout le monde, J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comparaison de JavaScript et PHP ajoutant dynamiquement des méthodes aux classes

vue2 mint-ui loadmore implémente l'actualisation déroulante , up Extrayez plus de fonctions

Code JS pour implémenter la fonction de détection de configuration informatique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!