'why nuxt app is to slow in phon, vuetify ,how can I increment performance on phone

hi I have nuxt app it work good and fast in pc but in phone is to slow I use vuetify in my app And I'm suspicious of this :) (The reason for the slowness of app is vuetify) It seems to involve RAM and CPU, and because the phone is weaker, it slows down drastically. how can I increment performance on phone . for example it load 1s in pc but in phone it load 4s and if it load 5s in pc in phone load 14s

is is my nuxt.config

export default {
  ssr: false,

  loadingIndicator: '~/static/html/loading.html',

  head: {
    titleTemplate: '%s | ****',
    title: '****',
    htmlAttrs: {
      lang: 'fa',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [
    '@/static/fonts/Ter/css/style.css',
    '@/static/css/main.css',
    '@/static/fonts/fontawesome/css/all.css',
  ],

  plugins: [
    {
      src: '@/plugins/drag.js',
      ssr: false,
    },
    {
      src: '@/plugins/ft.js',
      ssr: false,
    },
    {
      src: '@/plugins/particles',
      ssr: false,
    },
    {
      src: '@/plugins/axios.js',
      ssr: false,
    },
    {
      src: '@/plugins/lang.js',
    },
    {
      src: '@/plugins/vuetify.js',
    },
    {
      src: '@/plugins/Analytics.js',
      ssr: true,
    },
    {
      src: '@/plugins/Carousel3d.js',
      ssr: true,
    },
    {
      src: '@/plugins/EventBus.js',
    },
  ],

  components: true,

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/sitemap',
    '@nuxtjs/robots',
    'nuxt-i18n',
  ],

  i18n: {
    defaultLocale: 'fa',
    lazy: true,
    langDir: '~/langs',
    locales: [
      { code: 'en', name: 'english', iso: 'en-US', file: 'en.js', dir: 'ltr' },
      { code: 'fa', name: 'پارسی', iso: 'fa-IR', file: 'fa.js', dir: 'rtl' },
      { code: 'ar', name: 'العربی', iso: 'ar-QA', file: 'ar.js', dir: 'rtl' },
    ],
  },

  robots: {
    UserAgent: '*',
    Disallow: '/dashboard',
  },

  sitemap: {
    hostname: 'https://****/',
    exclude: ['/forget-password'],
  },

  axios: {
    // baseURL: 'https://****/api/',
    // baseURL: 'https://****/api/',
    baseURL: 'http://****/api/',
    headers: {
      common: {
        customer: 'true',
      },
    },
  },

  env: {
    baseURL: 'http://****/',
    selfURL: 'https://****/',
    cookieURL: 'localhost',
  },

  build: {
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        minifyURLs: true,
        removeComments: true,
        removeEmptyElements: true,
      },
    },
  },

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'link/verification',
            method: 'post',
            propertyName: 'access_token',
          },
          user: false,
        },
        token: {
          maxAge: 60 * 60,
        },
        autoFetchUser: false,
      },
    },
  },
}
vue.jsnuxt.jsvuetify.js


Solution 1:[1]

This kind of question cannot be answered easily with just that. Improving performance can take a lot of analysis, can come from various places and is a broad topic.

Here is two of my answers on this subject (still relevant in your case):

Few things we can note on your nuxt.config.js:

  • using ssr: false is basically fallback'ing to a pure SPA behavior, so the initial loading time may be quite slow (as always, it depends also on how you measure it)
  • loading global CSS (css key) can be a penalty too
  • all of the plugins you're loading are adding to the bundle-size (and hence, increase the loading time), maybe think to load some of them locally
  • ssr: false is legacy, please use mode: 'client'
  • also, checking for some smaller alternatives may be interesting too (are tho 37kB of JS worth it?)

Other than this, there is also your overall code, some middleware, some 3rd party like Google analytics, the list goes on and on.
But I think you have a decent starting point with this.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu

Related Questions