Блог

Главная - Вопросы по программированию - VUE.JS — Как повысить производительность при загрузке статического изображения

VUE.JS — Как повысить производительность при загрузке статического изображения

#javascript #html #css #vue.js

#javascript #HTML #css #vue.js

Вопрос:

У меня есть простое приложение в Vue.js и у меня есть компонент, который загружает 1 изображение и 2 текста на экран, очень простой.

Однако я заметил, что каждый раз загрузка изображения занимает несколько миллисекунд больше, чем загрузка текста, что создает впечатление медлительности.

Еще одна информация, иногда она загружается быстро, а иногда загрузка занимает некоторое время. Связано ли это с производительностью моей машины?

Есть ли у меня способ оптимизировать загрузку этого изображения, чтобы оно не показывало клиенту эту загрузку?

ИЗОБРАЖЕНИЕ

 **Dispenser.vue**
<template>
    <div>
        <gui-action1 :imageName="this.imageName" :title="this.title" :message="this.message" :showLoader="false">
        </gui-action1>
        
    </div>
</template>

<script>

import Action1 from '../../Guidance/Action1.vue'

export default {
    data(){
        return{
            optionSelected: this.$route.params.optionSelected,
            imageName: 'Organization_Image_Interaction_WaitCountReal',
            title: 'Ainda não finalizamos',
            message: 'Aguarde a contagem das notas'
        }
    },
    components: {
        'gui-action1': Action1
    },
    created(){
        setTimeout( () => this.$router.push({ path: "/withdraw/finishing"}), 4000);
    }
}
</script>
<style >
    @media screen and (max-width: 1280px) {
    }
</style>
 
 **Action.vue (Component)**
<template>
    <div class="guidance">
        <div class="guidance-title" >
            {{title}}
        </div>
        <div class="guidance-image" >
            <img :src="require('../../../static/'  `${imageName}`  '.svg')">
        </div>
        <div class="guidance-message" >
            {{message}}
        </div>
        <div v-bind:class="{ 'loader': showLoader }" ></div>
    </div>
</template>

<script>

export default {
    props: ['imageName', 'title', 'message', 'showLoader'],

    data(){
        return{
            imageNameDefault: 'Organization_Image_Interaction_WaitCountReal'   
        }
    }
}
</script>

<style>
    @media screen and (max-width: 1280px) {
        .guidance{
            position: relative;
            top: 70px;
            left: 30px;
        }
        .guidance-image{
            position: relative;
            top:200px;
            left: 220px;
        }

        .guidance-title{
            position: relative;
            top:140px;
            left: -40px;
            font-size: 55px;
            color: white;
            text-align: center;
        }

        .guidance-message{
            position: absolute;
            width: 100%;
            top:650px;
            left: -40px;
            font-size: 55px;
            color: white;
            text-align: center;
        }

        .loader {
            border: 7px solid #f3f3f3; /* Light grey */
            border-top: 7px solid #386083; /* Blue */
            border-radius: 50%;
            width: 130px;
            height: 130px;
            animation: spin 1.5s linear infinite;
            position: relative;
            left: 518px;
            top: -80px;
            opacity: 60%;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    }
</style>

Комментарии:

1. Используйте кэширование на сервере развертывания и изображения небольшого размера.

2. @BeshambherChaukhwan: Есть ли в Vue способ отложить загрузку изображений до тех пор, пока не загрузится весь текст?

3. есть пример того, как я мог бы это сделать? @BeshambherChaukhwan

4. @RobertHarvey создайте вопрос, если вам это нужно, комментарии не место для этого. В kel у вас могут быть разные скорости загрузки из-за кэша и общей производительности вашего оборудования, да.

5. Что здесь происходит ?? 😂

Ответ №1:

Вы могли бы использовать cloudinary-vue для супер простой, но производительной загрузки изображения.

Это может позволить использовать простой заполнитель изображения при загрузке только

 <cld-image 
  public-id="sample" 
  loading="lazy">
  <cld-placeholder 
    type="vectorize">
  </cld-placeholder>
</cld-image>

Вот Gatsby.js демо-версия (React), но она довольно четко показывает, как это работает с Cloudinary: https://using-gatsby-image.gatsbyjs.org/blur-up / (нажмите на Blur up , Traced SVG и т.д. в верхней части страницы).

Ofc, Cloudinary также соответствующим образом изменит его размер на вашем экране, может отформатировать его в .webp или даже .avif (бета-версия), подавать его с классного CDN и делать много других вещей. Не могу рекомендовать его достаточно tbh. Проверьте их документацию и попробуйте, это бесплатно, так что вам нечего терять.

В webperf есть МНОГО ЧЕГО (слишком много для простого ответа здесь), и вот, вероятно, одна из лучших статей (редактируемых каждый год) по этой теме, вы получите исчерпывающий список того, что нужно реализовать, если вам нужен быстрый веб-сайт: https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist /