CODEWITHSUNDEEP
vue.jsvuejs2vue-component
rocket_moon
rocket_moon

Reputation: 309

Improve Performance - Loop Items - Vue JS

I have an ecommerce online store that has categories with items and one page with all items available (in stock).

Some categories have close to 1500 items. The page with all products available has close to 4000 items.

I can load everything with the api very fast, the payload of the items is delivered in 50ms to 300ms (size of 90kb, the larger).

Only 30 items are show at the start. I use vue-observe-visibility to load more when the user scrolls to the bottom of the page. So it loads 30 items "per page" or "view".

The items use a item component where I loop through. Example

<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id">
 <item-card 
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:heart="true" v-if="!mobile">

<item-card-for-mobile
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:quickview="true"
v-else>
<div>

I tested it and when the user scrolls a lot and the increment of products gets to 1250 items for example, when changing the page (for example blank page with text, no api call) the single page app takes like 4 to 6 seconds to change.

Is there a way to make it more efficiently ?

Upvotes: 0

Views: 1226

Answers (1)

Cosimo Chellini
Cosimo Chellini

Reputation: 1730

tips to improve the performance of a list:

In this specific case, you can handle it in this way

<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-if="!mobile">
 <item-card 
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:heart="true">
<div>

<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-else>
 <item-card-for-mobile
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:quickview="true"
>

<div>

(ps this is a small code duplication but it avoids checking N times the mobile prop)

Upvotes: 2

Related Questions