Introduction à l'optimisation de l'écran d'accueil de l'application monopage Vue SPA

Cet article présente principalement la première pratique d'optimisation d'écran de l'application monopage Vue SPA. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

1. Compression du code (gzip)

Si vous utilisez le serveur nginx, veuillez modifier le fichier de configuration (d'autres serveurs Web sont similaires) : sudo nano /etc/nginx/nginx.conf

Ajouter les paramètres Gzip :

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

• gzip

• Activer ou désactiver le module gzip , ici Utilisez on pour démarrer

• gzip_min_length

• Définissez le nombre minimum d'octets de pages autorisés pour la compression. La valeur par défaut est 0, ce qui compresse la page quelle que soit sa taille.

• gzip_buffers

• Configurez le système pour obtenir plusieurs unités de cache pour stocker le flux de données du résultat de la compression gzip. 4 16 Ko signifie demander de la mémoire en unités de 16 Ko et 4 fois la taille des données d'origine en unités de 16 Ko

• gzip_comp_level

• Taux de compression, le taux de compression minimum de 1 est le plus rapide, et le taux de compression de 9 est le traitement le plus important mais le plus lent (la transmission est rapide mais consomme plus de CPU)

• gzip_types

• Faire correspondre le type MIME pour la compression, (qu'il soit spécifié ou non) le type "text/html" sera toujours compressé

Je fais cette configuration, un fichier qui doit être téléchargé sur la page d'accueil est compressé de 716 Ko à 246 Ko. Taux d'optimisation 66%.

Si vous n'activez pas gzip côté serveur, vous pouvez également activer la compression du code front-end et back-end

Si votre back-end utilise le framework Express.js pour fournir des services Web, vous pouvez ensuite utiliser un middleware de compression pour la compression gzip.

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

Si votre projet front-end est généré avec vue-cli, alors la compression de code a été activée dans le fichier de configuration Webpack (environnement de production).

2. Importez des fichiers externes à la demande || Pas besoin de fichiers externes, réinventez la roue

Si vous utilisez Element dans le projet, importez à la demande :

Installez d'abord babel-plugin-component :

npm install babel-plugin-component -D

Cela nous permet d'introduire uniquement les composants dont nous avons besoin pour réduire la taille du projet.

PS : Si une erreur est signalée à ce moment :

Erreur : erreur post-installation, veuillez supprimer node_modules avant de réessayer

C'est celui de cnpm faute. La raison est inconnue. La solution est d'utiliser npm pour installer ce module. (J'ai essayé de supprimer le fichier node_modules, mais l'erreur est restée)

Si vous utilisez une bibliothèque liée à Ajax, telle que vue-resource/axios

Supprimez-la et faites-le vous-même Implémentez une bibliothèque Ajax.

Par exemple, mon projet n'implique que get,post, donc vue-resource/axios est très inutile pour moi.

J'ai donc encapsulé une bibliothèque (prend en charge Promise, ne prend pas en charge IE) et l'utilise comme plug-in dans Vue :

/* xhr.js */
class XHR {
 get(url) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      if (xhr.responseText) {
       resolve(JSON.parse(xhr.responseText));
      } else {
       resolve(xhr.responseText);
      }
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open(&#39;get&#39;, url, true);
   xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/json&#39;);
   xhr.send(null);
  });
 }

 post(url, data) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      resolve(JSON.parse(xhr.responseText));
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open(&#39;post&#39;, url, true);
   xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/json&#39;);
   xhr.send(JSON.stringify(data));
  });
 }
}

/* Vue插件要求提供install方法：https://cn.vuejs.org/v2/guide/plugins.html */
XHR.install = (Vue) => {
 Vue.prototype.$get = new XHR().get;
 Vue.prototype.$post = new XHR().post;
};

export default XHR;

Cette méthode peut généralement réduire la taille du fichier par dizaines de Ko. Par exemple, vue-resource fait 35 Ko et mon xhr.js ne fait que 1,9 Ko.

3． Code Splitting/Code Splitting

Comme son nom l'indique, cela signifie diviser le code en morceaux et les charger à la demande. De cette façon, s'il y a des blocs qui ne sont pas nécessaires sur le premier écran, il n'est pas nécessaire de les charger.

peut être plus utile pour les grands projets, car dans mon projet, les fichiers requis pour la page d'accueil sont fondamentalement les mêmes que ceux requis pour les autres pages, le blocage de code n'est donc pas nécessaire pour mon projet.

4. Chargement paresseux des composants de routage

Lors de l'empaquetage et de la construction d'une application, le package Javascript deviendra très volumineux, affectant le chargement des pages. Si nous pouvons diviser les composants correspondant à différentes routes en différents blocs de code, puis charger les composants correspondants lors de l'accès à la route, ce sera plus efficace

Combinez les composants asynchrones de Vue et la fonctionnalité de fractionnement de code de Webpack, vous pouvez implémentez facilement le chargement paresseux des composants de routage.

Ce que nous devons faire est de définir le composant correspondant à la route comme un composant asynchrone :

const Foo = resolve => {
 /* require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
 （代码分块）*/
 require.ensure(['./Foo.vue'], () => {
 resolve(require('./Foo.vue'))
 })
}
/* 另一种写法 */
const Foo = resolve => require(['./Foo.vue'], resolve);

Il n'est pas nécessaire de modifier la configuration de routage, utilisez simplement Foo comme avant :

const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})

4. Webpack2 Tree-shaking

Tree-shaking est utilisé pour éliminer le code inutilisé.

Généralement, le tree-shaking n'est pas utilisé dans les petits projets personnels. Parce que vous n'écrirez pas de code inutilisé. Des projets à grande échelle pourraient tenter de l’utiliser.

5. Réduisez les données inutiles dans XHR.

Par exemple, dans mon projet, la page d'accueil n'a besoin que du titre du blog, de l'identifiant et des balises. Le temps et le contenu ne sont plus nécessaires, et le contenu est généralement très volumineux (généralement environ 10 Ko par article).

6. SSR (Server Side Render/Server Side Rendering)

C'est un peu difficile à faire. Mais l'effet semble plutôt bon. J'ai déjà jeté un bref coup d'œil à la documentation de Vue et j'ai prévu de le faire si j'en ai besoin à l'avenir.

7. Je n'entrerai pas dans les détails sur d'autres choses telles que le chargement paresseux des images, mais c'est du bon sens que les développeurs front-end devraient avoir.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser la transition de Vue pour terminer la transition coulissante

Utilisation de $refs dans Vue

Comment installer Mint-UI dans le projet vue

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!