Consumption of internet data using Vue.Js or similar

Question

Consumption of internet data using Vue.Js or similar

Navigation

#1 by (0 votes)

1

Good morning, I have an application in Vue, where the upper and lateral nav are static, and the content (body) is loaded according to the requests made in the nav links. The Vue greatly accelerates the use, charging only the center, but does this mean that the internet data consumption is less because it is only loading the body? Or does it load everything up again without us noticing?

Example: If there are two identical systems visually, one written in traditional html, and another using Vue.Js, would vue consume less internet? (knowing that html reloads the complete page with every request)

javascript vue.js front-end

asked by anonymous 03.08.2018 / 15:23

1 answer

Problem in creating unit test android with RxJava and Mockito Mount tree of objects

score 0 · Answer 1

In general, a SPA page after loading will consume less bandwidth than a traditional application (Multi Page), but depending on how the implementation is, you will have to download a large amount of data on the first request. However, you can work around this problem by using some techniques.

Lazy Loading

The idea here is for the component referenced by the route to be loaded on demand. So instead of doing this.:

import SomePage from 'pages/SomePage'

const routes = [
  {
    path: '/some-page',
    component: SomePage
  }
]

We can declare the route as follows:

const routes = [
  {
    path: '/some-page',
    component: () => import('pages/SomePage')
  }
]

PWA

PWA has come to stop making the web experience as close as possible to whether you are using an application. And a PWA application should be.:

Progressive - Works well on any browser.
Responsive - Adapt to any screen
Network Unbundling - Function even while offline
Appear with an Application - The usage experience should look like an installed application.
Always Updated - no comment required.
Secure - Always use HTTPS
Indexable - Allow indexing by search pages (Google, Binq, etc.).
Engage - Allow you to easily continue a task or be notified if something new appears (Push).
Installable - Allow adding a shortcut to the desktop.
Shareable - Share only by using a Link.

In order to achieve this result, you have to use everything within reach, Services Workers to keep the app always up to date, Push API to notify the User, LocalStorage or IndexedDB to store data locally (dynamic content) and Cache API to store assets (images, fonts, etc.).

SSR

Basically it is to allow your pages to be rendered also on the server. Since we're talking about VueJS , you'll have to use Nuxt.js

Quasar Framework

Believe you can use everything at once, Lazy Loading , PWA , SSR , and still deploy to Android and iOS using Cordova and Windows , Mac , Linux using Electron , and Quasar Framework will help you keep all these worlds together without creating pandemonium.