[VUE] Résoudre le problème de chargement lent des images et des vidéos du projet VU2/chargement de l'écran blanc sur le premier écran

Enterprise 2023-07-18 17:39:35 views: null

1 Description du problème

Dans le projet frontal, il y aura parfois des problèmes tels que le chargement lent des images et des vidéos, et le chargement de l'écran blanc sur le premier écran

J'ai écrit une solution dans le projet VU3 avant,

Parlons maintenant de la solution dans le projet Vue2. Les idées des méthodes sont similaires, et il y aura quelques petites différences dans les exemples de code.

2 Analyse des raisons

Généralement causé par :

  1. Format d'image ou de vidéo incorrect : Si le format d'image ou de vidéo n'est pas correctement sélectionné, comme le format de compression sans perte, la taille du fichier peut être trop grande, ce qui affectera la vitesse de chargement.

  2. Un grand nombre d'images et de vidéos sont chargées sur la page en même temps , ce qui entraîne un trop grand nombre de requêtes et une vitesse de transmission réseau limitée, ce qui affecte la vitesse de chargement de la page.

  3. Les images et les vidéos de la page ne sont pas optimisées , telles que non compressées, non accélérées par CDN, etc.

  4. Les codes HTML, CSS et JavaScript de la page ne sont pas optimisés , comme ne pas utiliser de webpack pour l'emballage, ne pas utiliser la technologie de fractionnement de code, etc., ce qui entraîne un temps de chargement de page trop long.

  5. Les images et les vidéos de la page n'utilisent pas la technologie de chargement paresseux , ce qui fait que la page charge trop de ressources à la fois, ce qui ralentit le chargement de la page.

  6. De mauvaises conditions de réseau , telles que la latence du réseau, une bande passante limitée, etc., peuvent ralentir le chargement des images et des vidéos.

  7. Le temps de réponse du serveur est trop long : Si le temps de réponse du serveur est trop long, cela va ralentir le temps de demande de ressources de la page, affectant ainsi la vitesse de chargement de la page.

  8. Des bibliothèques tierces instables sont utilisées : Si vous utilisez des bibliothèques ou des composants tiers instables, cela peut ralentir la vitesse de chargement des pages.

  9. Politique de mise en cache du navigateur incorrecte : si la politique de mise en cache du navigateur n'est pas définie correctement, le navigateur peut demander des ressources à plusieurs reprises, ce qui affecte la vitesse de chargement de la page.

  10. Politique de sécurité réseau stricte : Si la politique de sécurité réseau est relativement stricte, cela peut amener le navigateur à rencontrer certaines restrictions lors de la demande de ressources, affectant ainsi la vitesse de chargement des pages.

Par conséquent, lors du développement d'un projet Vue2, vous devez faire attention à l'optimisation des images et des vidéos, à la réduction du nombre de requêtes, à l'utilisation de la technologie de chargement paresseux, à l'optimisation du code, etc., pour améliorer la vitesse de chargement des pages et éviter des problèmes tels que le chargement lent et le blanc chargement de l'écran sur le premier écran.

3 solutions

Le problème de chargement lent des images et des vidéos, entraînant un écran blanc sur le premier écran, peut généralement être résolu à partir des aspects suivants :

  1. Optimisation des photos et vidéos
  2. chargement paresseux
  3. Écran squelette
  4. Optimisation du code

3.1 Optimisation des photos et vidéos

La taille du fichier peut être réduite par la compression d'image, la compression vidéo et d'autres technologies, afin d'améliorer la vitesse de chargement. Dans le même temps, l'accélération CDN peut également être utilisée pour accélérer le chargement des ressources.

Voici quelques façons de commencer :

  1. Compresser des photos ou des vidéos
  2. Choisissez le format d'image ou de vidéo approprié
  3. Accélérez avec le CDN image ou vidéo
  4. Utiliser des techniques de chargement paresseux

3.1.1 Compresser des photos ou des vidéos

Vous pouvez utiliser des outils de compression d'image ou de vidéo pour compresser la taille du fichier à une taille appropriée. Pour les images, vous pouvez utiliser des outils de compression d'image en ligne ou un logiciel d'édition d'image tel que Photoshop pour compresser ; pour les vidéos, vous pouvez utiliser un logiciel de compression vidéo, tel que HandBrake, pour compresser.

Recommandation d'outil de compression

Voici quelques outils de compression d'images en ligne couramment utilisés :

TinyPNG est un outil de compression d'image en ligne gratuit qui peut compresser les images PNG et JPEG à une taille appropriée sans affecter la qualité de l'image.

Compressor.io est un outil de compression d'images en ligne gratuit qui peut compresser des images dans des formats tels que JPEG, PNG, SVG et GIF. Il compresse les images à une taille plus petite sans compromettre la qualité de l'image.

Kraken est un service d'optimisation et de compression d'images en ligne qui peut compresser des images dans des formats tels que JPEG, PNG et GIF à la plus petite taille de fichier. Kraken fournit également une interface API, qui peut être facilement intégrée au projet.

ImageOptim est un outil d'optimisation d'image gratuit qui compresse automatiquement les images dans des formats tels que JPEG, PNG et GIF, et supprime automatiquement les métadonnées et les informations inutiles des images pour réduire la taille du fichier.

3.1.2 Sélectionnez le format d'image ou de vidéo approprié

Le choix d'un format d'image ou de vidéo approprié peut également réduire la taille du fichier. Par exemple, pour les images, vous pouvez choisir le format JPEG ou WebP, et pour la vidéo, vous pouvez choisir le format H.264 ou H.265.

3.1.3 Utiliser le CDN image ou vidéo pour accélérer

Vous pouvez utiliser l'accélération CDN image ou vidéo pour distribuer des ressources image ou vidéo sur des nœuds CDN dans le monde entier, accélérant ainsi la vitesse de transmission des ressources et améliorant la vitesse de chargement des pages.

Plan de mise en œuvre

L'utilisation de l'accélération CDN image ou vidéo peut améliorer considérablement la vitesse d'accès au site Web et l'expérience utilisateur. Voici quelques méthodes de mise en œuvre

1 Remplacer manuellement l'url 

Cette méthode est plus simple, mais nécessite un remplacement manuel de chaque URL et un remplacement lorsque l'URL change.

<img src="https://cdn.example.com/images/logo.png">
<video src="https://cdn.example.com/videos/teaser.mp4"></video>
2 Utilisation du plug-in Webpack

Certains plugins sont disponibles dans Webpack pour remplacer automatiquement les URL. Par exemple,  url-loader vous pouvez convertir des images plus petites que la taille spécifiée en codage base64 et copier des images plus grandes que la taille spécifiée dans le répertoire de sortie et les remplacer par des URL sur le CDN. html-webpack-plugin Vous pouvez remplacer les ressources locales dans les fichiers HTML par des URL sur le CDN.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'images/[name].[hash:8].[ext]',
                  publicPath: 'https://cdn.example.com/'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          sources: {
            list: [
              {
                attribute: 'src',
                type: 'src',
                tag: 'img'
              },
              {
                attribute: 'src',
                type: 'src',
                tag: 'video'
              }
            ],
            urlFilter: (attribute, value, resourcePath) => {
              // 只处理本地资源
              return !/^(https?:)?\/\//i.test(value);
            }
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css'
    })
  ]
  // ...
};

Dans cet exemple,

`url-loader` et `html-loader` sont utilisés, et l'attribut `publicPath` est défini dans l'option `fallback` pour spécifier l'URL sur le CDN.

Dans `html-loader`, nous utilisons l'option `sources` pour spécifier les ressources locales qui doivent être remplacées. `HtmlWebpackPlugin` et `MiniCssExtractPlugin` sont utilisés pour générer des fichiers HTML et CSS.

3 Utilisation de bibliothèques tierces

Certaines bibliothèques tierces peuvent nous aider à remplacer automatiquement les URL, par exemple,  vue-loader les URL d'image et de vidéo dans les composants Vue peuvent être remplacées par des URL sur CDN. vue-lazyload Les images peuvent être chargées paresseusement et les URL peuvent être automatiquement remplacées.

// main.js
import Vue from 'vue';
import App from './App.vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'https://cdn.example.com/images/error.png',
  loading: 'https://cdn.example.com/images/loading.gif',
  attempt: 1,
  observer: true,
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  },
  filter: {
    progressive: (listener, options) => {
      // 过滤器，用于处理渐进式图片
      const isCDN = /^https?:\/\/cdn\.example\.com\//i.test(listener.src);
      if (isCDN) {
        options.adapter(listener, options);
      } else {
        listener.el.setAttribute('data-src', listener.src);
      }
    }
  }
});

new Vue({
  render: h => h(App)
}).$mount('#app');
```

在这个示例中，我们使用了 `vue-lazyload`，并设置了一些选项来指定 CDN 上的 URL。在过滤器中，我们使用了正则表达式来判断图片是否在 CDN 上，并根据需要将图片 URL 替换为 `data-src` 属性，以便 `vue-lazyload` 可以正确地处理。

Les trois méthodes ci-dessus peuvent toutes être utilisées pour accélérer des images ou des vidéos à l'aide de CDN, et les méthodes de mise en œuvre spécifiques peuvent être sélectionnées et combinées en fonction des conditions spécifiques du projet.

3.1.4 Utilisation de la technologie de chargement différé

La technologie de chargement paresseux peut être utilisée pour retarder le chargement des images ou des vidéos jusqu'à ce que l'utilisateur ait besoin d'y accéder, réduisant ainsi la demande de la page pour trop de ressources à la fois et améliorant la vitesse de chargement de la page.

Plan de mise en œuvre

Dans les projets Vue 2, vous pouvez utiliser la technologie de chargement différé pour retarder le chargement des composants, réduire le temps de chargement du premier écran et améliorer les performances de la page. Voici comment utiliser la technologie de chargement différé de Vue 2 :

Chargement paresseux avec Vue Router

Vue Router offre un moyen simple de charger des composants paresseux et de charger dynamiquement des composants en cas de besoin. component: () => import('@/views/Home.vue') Les composants peuvent être chargés paresseusement en utilisant simplement le formulaire  dans la configuration de routage  Home.vue .

```

Dans cet exemple, nous utilisons la méthode `import()` pour charger dynamiquement les composants `Home.vue` et `About.vue`.

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
});
Chargement paresseux avec Webpack

Dans Webpack, vous pouvez utiliser  require.ensure() la méthode ou  import() pour effectuer un chargement paresseux. require.ensure() Les modules peuvent être chargés de manière asynchrone si nécessaire, import() et les méthodes peuvent charger les modules ES6 de manière asynchrone.

```

Dans cet exemple, la méthode `import()` est utilisée pour charger de manière asynchrone le composant `About.vue` et le restituer après le chargement.
 

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

// 异步加载 About 组件
const loadAbout = () => {
  return import(/* webpackChunkName: "about" */ './About.vue');
};

// 异步加载 About 组件并渲染
loadAbout().then(About => {
  new Vue({
    el: '#about',
    render: h => h(About)
  });
});

Les deux méthodes ci-dessus peuvent réaliser la technologie de chargement paresseux Vue 2, et les méthodes de mise en œuvre spécifiques peuvent être sélectionnées et combinées en fonction des conditions spécifiques du projet. Il convient de noter que le chargement paresseux augmentera la complexité du code, qui doit être pesée en fonction de la situation réelle.

 

3.2 Chargement paresseux

Grâce à la technologie de chargement paresseux, le chargement des images et des vidéos peut être retardé jusqu'à ce que l'utilisateur ait besoin d'y accéder, réduisant ainsi les ressources excessives chargées sur la page en même temps et améliorant la vitesse de chargement du premier écran.

Voici comment implémenter le chargement différé d'images et de vidéos à l'aide de la technologie de chargement différé :

Utilisation de l'API Intersection Observer

Utilisation de l'API Intersection Observer

L'API Intersection Observer est une nouvelle API de navigateur qui peut surveiller si un élément spécifié entre dans la fenêtre d'affichage, déclenchant ainsi une fonction de rappel.

L'opération de chargement d'images ou de vidéos peut être déclenchée en surveillant si des éléments d'image ou de vidéo entrent dans la fenêtre d'affichage.

Exemple d'utilisation 

Voici un exemple de code Vue 2 qui utilise l'API Intersection Observer pour implémenter le chargement différé des images :

<template>
  <div>
    <div class="image-container" v-for="image in images" :key="image.id">
      <img v-if="image.show" :src="image.src" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          id: 1,
          src: "https://example.com/image1.jpg",
          show: false
        },
        {
          id: 2,
          src: "https://example.com/image2.jpg",
          show: false
        },
        {
          id: 3,
          src: "https://example.com/image3.jpg",
          show: false
        },
        {
          id: 4,
          src: "https://example.com/image4.jpg",
          show: false
        }
      ]
    };
  },
  mounted() {
    // 创建 Intersection Observer 实例
    const observer = new IntersectionObserver(entries => {
      // 遍历 IntersectionObserverEntry 数组
      entries.forEach(entry => {
        // 如果元素出现在视口中
        if (entry.isIntersecting) {
          // 将图片的 show 属性设置为 true，触发图片加载
          const image = this.images.find(img => img.id === Number(entry.target.dataset.id));
          if (image) {
            image.show = true;
          }
          // 停止观察该元素，节省性能
          observer.unobserve(entry.target);
        }
      });
    });

    // 观察所有图片容器元素
    const imageContainers = document.querySelectorAll('.image-container');
    imageContainers.forEach(container => {
      observer.observe(container);
    });
  }
};
</script>

<style>
  .image-container {
    height: 300px;
    margin-bottom: 20px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

Dans cet exemple, nous utilisons l'API Intersection Observer pour surveiller chaque élément de conteneur d'image et, lorsqu'ils apparaissent dans la fenêtre d'affichage, définissez la propriété show de l'image correspondante sur true pour déclencher le chargement de l'image.

Dans le même temps, nous arrêtons également d'observer les éléments qui sont déjà dans la fenêtre d'affichage, pour économiser les performances.

Utiliser des bibliothèques tierces

En plus d'utiliser l'API Intersection Observer, vous pouvez également utiliser certaines bibliothèques tierces pour implémenter le chargement différé d'images et de vidéos.

Tels que LazyLoad, Lozad.js, LazyLoad-xt, etc. Ces bibliothèques peuvent obtenir des effets de chargement paresseux plus rapidement et fournir plus d'options de configuration, telles que des conditions de déclenchement pour le chargement paresseux, des effets d'animation, etc. Pour les modes d'utilisation spécifiques, veuillez vous référer à leurs documents officiels.

Exemple d'utilisation

Bien sûr, voici un exemple Vue 3 qui utilise la bibliothèque LazyLoad pour implémenter le chargement différé des images :

Installer et importer la bibliothèque LazyLoad

Voici un exemple de code Vue 2 qui utilise la bibliothèque LazyLoad pour implémenter le chargement différé des images :

Tout d'abord, la bibliothèque LazyLoad doit être installée et importée :

npm install vanilla-lazyload --save

import LazyLoad from 'vanilla-lazyload';
Créer une instance LazyLoad 

Dans la fonction hook montée du composant, créez une instance LazyLoad et transmettez un objet de configuration :

<template>
  <div>
    <div class="image-container" v-for="image in images" :key="image.id">
      <img :data-src="image.src" />
    </div>
  </div>
</template>

<script>
import LazyLoad from 'vanilla-lazyload';

export default {
  data() {
    return {
      images: [
        {
          id: 1,
          src: "https://example.com/image1.jpg",
        },
        {
          id: 2,
          src: "https://example.com/image2.jpg",
        },
        {
          id: 3,
          src: "https://example.com/image3.jpg",
        },
        {
          id: 4,
          src: "https://example.com/image4.jpg",
        }
      ]
    };
  },
  mounted() {
    // 创建 LazyLoad 实例
    const lazyLoadInstance = new LazyLoad({
      threshold: 0,
      // 指定要进行懒加载的元素
      elements_selector: "img[data-src]"
    });
  }
};
</script>

<style>
  .image-container {
    height: 300px;
    margin-bottom: 20px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

Dans cet exemple, la bibliothèque LazyLoad est utilisée pour implémenter le chargement différé des images.

  1. Tout d'abord, stockez l'adresse réelle de chaque image dans  data-src une propriété personnalisée, pas  src un attribut.
  2. Ensuite, dans la fonction de crochet monté du composant, créez une instance LazyLoad et transmettez un objet de configuration, où l'  threshold attribut spécifie la distance entre l'élément et la zone visible, et elements_selector l'attribut spécifie l'élément à charger paresseusement.
  3. src Enfin, remplacez l'attribut  de l'image par un attribut dans le modèle  data-src , de sorte que lorsque l'image entre dans la zone visible, la bibliothèque LazyLoad attribue automatiquement  data-src la valeur de l'attribut à  src l'attribut, déclenchant le chargement de l'image.

3.3 Écran squelette

Skeleton Screen est une technologie d'optimisation du chargement des pages qui peut afficher un simple cadre gris lors du chargement de la page au lieu du contenu déchargé. L'écran squelette peut améliorer l'expérience utilisateur, donner aux utilisateurs l'impression que la page se charge plus rapidement et peut également réduire l'anxiété des utilisateurs.

Dans Vue 2, certaines bibliothèques tierces peuvent être utilisées pour obtenir des effets d'écran squelette, tels que vue-skeleton-webpack-plugin, vue-content-loader, vue-loading-skeleton, etc.

3.3.1 Comment utiliser vue-content-loader dans Vue 2 pour obtenir un effet d'écran squelette ?

vue-content-loader Il s'agit d'une bibliothèque de composants Vue.js qui peut nous aider à réaliser l'effet d'écran squelette. Il fournit une variété de formes SVG prédéfinies, qui peuvent générer rapidement des modèles d'écran squelette et peuvent personnaliser les couleurs, les tailles, les animations, etc.

vue-content-loader Voici les étapes pour implémenter l'effet d'écran squelette dans Vue 2  :

Voici les étapes à suivre pour utiliser vue-content-loader pour réaliser l'effet d'écran squelette dans Vue 2 :

1. Installez la bibliothèque vue-content-loader

npm install vue-content-loader --save

2. Importez la bibliothèque vue-content-loader dans le composant

import ContentLoader from 'vue-content-loader';

Utilisez le composant ContentLoader dans votre modèle :

Dans cet exemple, le composant ContentLoader est utilisé comme élément racine et les propriétés width et height sont définies. L'élément enfant du composant ContentLoader est un élément rectangle SVG dont les propriétés x, y, rx, ry, width et height sont toutes définies en fonction de nos besoins.

Vous pouvez ajouter d'autres éléments enfants si nécessaire pour obtenir des effets d'écran squelette plus complexes. Par exemple, vous pouvez utiliser un dégradé linéaire, un dégradé radial, une animation et d'autres fonctionnalités pour rendre l'écran squelette plus vivant.

<template>
  <div>
    <ContentLoader :width="400" :height="300">
      <rect x="0" y="0" rx="5" ry="5" :width="400" :height="300" />
    </ContentLoader>
  </div>
</template>

Définir dynamiquement les propriétés du composant ContentLoader

Si nécessaire, vous pouvez définir des accessoires dans le composant pour définir dynamiquement les propriétés du composant ContentLoader. Par exemple:

Dans cet exemple, deux accessoires largeur et hauteur sont définis, qui définissent respectivement la largeur et la hauteur du composant ContentLoader.

Si ces accessoires ne sont pas passés lors de l'utilisation du composant, ils utiliseront les valeurs par défaut de 400 et 300.

<template>
  <div>
    <ContentLoader :width="width" :height="height">
      <rect x="0" y="0" rx="5" ry="5" :width="width" :height="height" />
    </ContentLoader>
  </div>
</template>

<script>
import ContentLoader from 'vue-content-loader';

export default {
  components: {
    ContentLoader
  },
  props: {
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 300
    }
  }
};
</script>

Ce qui précède sont les étapes pour utiliser vue-content-loader dans Vue 2 pour réaliser l'effet d'écran squelette. Utilisez vue-content-loader pour créer rapidement et facilement des effets d'écran squelette afin d'améliorer l'expérience utilisateur.

3.3.2 Un exemple d'utilisation de vue-skeleton-webpack-plugin pour implémenter un écran squelette

vue-skeleton-webpack-plugin Il s'agit d'un plug-in Webpack qui peut nous aider à générer des modèles d'écran squelette pendant le processus d'empaquetage et à les injecter automatiquement dans des fichiers HTML.

Voici  vue-skeleton-webpack-plugin un exemple d'utilisation de l'écran squelette :

Voici un exemple d'utilisation de vue-skeleton-webpack-plugin pour implémenter un écran squelette dans Vue 2 :

1. Installez le plug-in vue-skeleton-webpack

npm install vue-skeleton-webpack-plugin --save-dev

2. Ajoutez vue-skeleton-webpack-plugin au fichier de configuration webpack

const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new VueSkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: './src/entry-skeleton.js'
        }
      },
      router: {
        mode: 'history',
        routes: [
          { path: '/', skeletonId: 'home' },
          { path: '/about', skeletonId: 'about' }
        ]
      },
      minimize: true,
      quiet: true
    })
  ]
  // ...
};

Dans cet exemple, une instance de VueSkeletonWebpackPlugin est créée et certains objets de configuration sont transmis.

dans,

  • L'attribut `webpackConfig` spécifie le fichier d'entrée comme `./src/entry-skeleton.js`,
  • L'attribut `router` spécifie la route et l'ID d'écran squelette correspondant à l'écran squelette.
  • La propriété `minimize` permet la compression du code,
  • L'attribut `quiet` supprime la journalisation.

3. Créez le fichier entry-skeleton.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App, { props: { isSkeleton: true } })
}).$mount('#app');

Dans cet exemple, une instance de Vue est créée et l'attribut "isSkeleton" est passé au composant App pour déterminer s'il s'agit d'un mode d'écran squelette dans le composant.

4. Utiliser les composants partiels Skeleton dans les composants

<template>
  <div>
    <skeleton id="home">
      <div class="home-page">
        <!-- 这里是首页的真实内容 -->
      </div>
    </skeleton>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  components: {
    skeleton: () => import('vue-skeleton-webpack-plugin/lib/client/skeleton')
  },
  props: {
    isSkeleton: Boolean
  }
};
</script>

Dans cet exemple,

Utilisez `import('vue-skeleton-webpack-plugin/lib/client/skeleton')` pour importer le composant partiel Skeleton et l'utiliser dans le modèle pour envelopper le contenu réel.

Un attribut `isSkeleton` est également défini pour déterminer s'il s'agit d'un mode d'écran squelette.

Notez que l'introduction des composants locaux Skeleton doit être écrite comme une fonction. En effet, en mode écran squelette, le composant Skeleton ne sera pas intégré au code normal, mais injecté dynamiquement par le plug-in vue-skeleton-webpack au moment de l'exécution.

3.4 Optimisation du code 

Lors de l'optimisation du code, plusieurs aspects doivent être pris en compte de manière globale, notamment les performances, la lisibilité, la maintenabilité, etc.

Voici quelques méthodes courantes d'optimisation du code et les problèmes qui en résultent :

  1. chargement paresseux/chargement à la demande
  2. mécanisme de mise en cache
  3. Compression et fusion de code
  4. Autres méthodes d'optimisation

3.4.1 Chargement différé/chargement à la demande

Le chargement différé/chargement à la demande consiste à différer le chargement des pages ou des modules jusqu'à ce qu'ils soient nécessaires, afin de réduire le temps de chargement initial et le nombre de requêtes réseau, et d'améliorer les performances des pages. Cependant, lors de l'utilisation du chargement différé/chargement à la demande, les problèmes suivants peuvent survenir :

  • Lors du premier chargement, les utilisateurs peuvent devoir attendre plus longtemps pour voir le contenu de la page.
  • Si trop de modules sont chargés à la demande, des requêtes réseau excessives peuvent se produire, entraînant des chargements de page plus lents.
  • Le code chargé paresseux/à la demande peut augmenter la complexité et réduire la lisibilité et la maintenabilité du code.

3.4.2 Mécanisme de mise en cache

Le mécanisme de mise en cache fait référence à la mise en cache de certaines ressources statiques (telles que des images, CSS, JS, etc.) sur le client pour réduire le nombre de requêtes réseau et améliorer les performances de la page. Cependant, lors de l'utilisation de mécanismes de mise en cache, les problèmes suivants peuvent survenir :

  • Si le temps de cache est trop long, les utilisateurs peuvent ne pas être en mesure de voir le dernier contenu.
  • Si le temps de cache est trop court, les utilisateurs peuvent fréquemment redemander des ressources et réduire les performances de la page.
  • Le mécanisme de mise en cache peut imposer une charge supplémentaire au serveur et au client, augmentant la surcharge du serveur et du client.

3.4.3 Compression et consolidation du code

La compression et la fusion de code font référence à la compression de plusieurs fichiers JS ou CSS dans un seul fichier et à la suppression des caractères non pertinents tels que les espaces et les commentaires, afin de réduire la taille du fichier et d'améliorer les performances de la page. Cependant, lors de l'utilisation de la minification et de la fusion de code, les problèmes suivants peuvent survenir :

  • Si le fichier compressé et fusionné est trop volumineux, le temps de téléchargement du fichier peut être trop long et affecter les performances de la page.
  • La compression et la fusion du code peuvent ajouter de la complexité et réduire la lisibilité et la maintenabilité du code.
  • Si les fichiers compressés et fusionnés ne sont pas suffisamment flexibles, il peut en résulter une incapacité à personnaliser et à optimiser différentes pages.

3.4.4 Autres méthodes d'optimisation

En plus des méthodes ci-dessus, il existe d'autres méthodes d'optimisation du code, telles que l'utilisation d'algorithmes ou de structures de données plus efficaces, la réduction du redessin et de la refusion, l'optimisation de la taille et du format de l'image, etc. Les effets et les problèmes de ces méthodes d'optimisation sont également différents et doivent être sélectionnés et évalués en fonction de situations spécifiques.

En résumé, l'optimisation du code doit prendre en compte plusieurs aspects de manière globale, non seulement la recherche de performances, mais également la lisibilité et la maintenabilité du code pour assurer l'équilibre entre la qualité du code et l'expérience utilisateur.

3.4.5 Exemples

Voici un exemple de comparaison de la résolution du premier vide de chargement d'écran dans le projet Vue 2 :

Exemple de code avant optimisation :

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/static/js/vendor.js"></script>
    <script src="/static/js/app.js"></script>
  </body>
</html>

javascript

Copie

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

Dans cet exemple, nous n'avons pris aucune mesure d'optimisation et avons rendu directement l'application Vue dans  #app l'élément. Cette approche se traduit par une page vierge lors du premier chargement de la page, car le navigateur doit télécharger et analyser  vendor.js deux  app.js fichiers avant de pouvoir afficher la page.

Exemple de code optimisé :

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Vue App</title>
    <script>
      window.__INITIAL_STATE__ = {}
    </script>
    <script src="/static/js/vendor.js" defer></script>
    <script src="/static/js/app.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>


// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

Dans cet exemple, les optimisations suivantes sont utilisées :

  • Définissez  les propriétés des vendor.js deux  app.js fichiers  defer sur  true, indiquant que leur téléchargement ne bloquera pas le rendu de la page.
  • head Ajoutez une étiquette vide  à  l'étiquette script et définissez-la comme  window.__INITIAL_STATE__ valeur initiale de . Cette variable peut être utilisée dans les requêtes asynchrones ultérieures pour éviter l'effacement lors du chargement de la page.
  • Placez  #app les éléments  body dans les balises pour éviter les espaces blancs lors du chargement de la page.

Ces optimisations peuvent réduire considérablement les temps de chargement des pages et éviter les écarts lors du chargement des pages.

3.5 Comment définir la politique de cache du navigateur pour améliorer la vitesse de chargement des pages ?

La définition de la politique de cache du navigateur peut réduire les demandes répétées de ressources du navigateur, améliorant ainsi la vitesse de chargement des pages. Ceci peut être réalisé en définissant la stratégie de mise en cache dans l'en-tête de réponse HTTP.

Voici quelques méthodes courantes pour définir des règles de mise en cache :

  1. Mettre en place un cache fort
  2. Définir le cache de négociation

3.5.1 Définir un cache fort

La mise en cache forte signifie que le navigateur obtient directement les ressources du cache local dans un certain laps de temps sans envoyer de demande au serveur. Vous pouvez définir la durée du cache fort en définissant l'en-tête de réponse "Expires" ou "Cache-Control", comme suit :

  • Expire : Définissez l'heure d'expiration, par exemple « Expire : Mer 21 Oct 2023 07:28:00 GMT »
  • Cache-Control : définissez la politique de cache, telle que "Cache-Control : max-age=3600", ce qui signifie que la ressource est valide dans les 3 600 secondes.

3.5.2 Définir le cache de négociation

La mise en cache des négociations signifie que le navigateur envoie une demande au serveur après le délai d'expiration, et le serveur jugera si la ressource a changé en fonction des informations ETag ou Last-Modified de la ressource. Si la ressource n'a pas changé, le serveur renverra un code d'état 304, indiquant au navigateur que le cache local peut être utilisé directement. La mise en cache des négociations peut être définie en définissant les en-têtes de réponse "Last-Modified" et "ETag" comme suit :

  • Last-Modified : Indique l'heure de la dernière modification de la ressource, par exemple "Last-Modified : Wed, 21 Oct 2023 07:28:00 GMT"
  • ETag : Indique l'identifiant unique de la ressource, tel que « ETag : W/1234567890 »

Notez que lors de la définition de la stratégie de cache, celle-ci doit être définie en fonction de la situation spécifique. Un temps de cache trop long peut retarder les mises à jour des ressources, tandis qu'un temps de cache trop court peut affecter la vitesse de chargement des pages. Il est recommandé d'ajuster en fonction de la situation réelle.

​

Je suppose que tu aimes

Origine blog.csdn.net/weixin_44171297/article/details/131761857
conseillé
Classement
du quotidien
Plus
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(2)
2024-06-03(0)
2024-06-02(1)
2024-06-01(0)

Code World

© 2018 codetd.com