Increase performance(decrease size) of Vue app

I was faced with the performance of the web application, I didn't know how to optimize it. My single-page websites with good internet load in 2-3 seconds, if I put in 2G and 3G, it loads in about +20seconds. I have installed several libraries locally Quasar, and WaveUI(Before I also used NaiveUI, it took about 1M bytes, I decided to remove it. How can I increase the loading and size of the website?

What I have done and tried to do:

• use CDN, but it not working.

• I use 'defineAsyncComponent for "Lazy loading of components".

• Converted from CSS/SCSS to sass.

I even don't use any heavy scripts, I only fetch and display the data from js file as a list, that's all.

my App.vue

<template>
  <w-app class="main-app">
    <q-layout>
      <q-header reveal className="sticky-top">
        <Navigation/>
      </q-header>
      <MainContent/>
    </q-layout>
  </w-app>
</template>

<script>
import {defineAsyncComponent} from 'vue'
const MainContent = defineAsyncComponent(() =>
    import('@/components/MainContent.vue')
)
const Navigation = defineAsyncComponent(() =>
    import('@/components/NavigationComponent.vue')
)
export default {
  components: {MainContent, Navigation}
}

</script>

MainContent.vue

<template>
  <w-flex justify-center class="pa3">
    <SideElements></SideElements>
    <div class="grow fill-width text-center">
      <section id="first">
        <FirstSection></FirstSection>
      </section>
      <section>
        <AboutMe id="about"></AboutMe>
      </section>
      <section>
        <ExperienceSection id="experience"/>
      </section>
      <section>
        <FeaturedProject id="projects">

        </FeaturedProject>
      </section>
    </div>
  </w-flex>
</template>

<script>
import {defineAsyncComponent} from 'vue'
const FirstSection = defineAsyncComponent(() =>
    import('@/components/FirstSection.vue')
)
const AboutMe = defineAsyncComponent(() =>
    import('@/components/AboutMe.vue')
)
const ExperienceSection = defineAsyncComponent(() =>
    import('@/components/ExperienceSection.vue')
)
const SideElements = defineAsyncComponent(() =>
    import('@/components/SideElements.vue')
)
const FeaturedProject = defineAsyncComponent(() =>
    import('@/components/FeaturedProject.vue')
)

export default {
  components: {
    FeaturedProject,
    ExperienceSection,
    AboutMe,
    FirstSection,
    SideElements
  }
}
</script

main.js

import { createApp } from 'vue'
import App from './App.vue'
//Quasar
import { Quasar } from 'quasar'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

//WaveUI
import WaveUI from 'wave-ui'
import 'wave-ui/dist/wave-ui.css'

const app = createApp(App)
app.use(Quasar, {
    plugins: {}, // import Quasar plugins and add here
})
app.use(WaveUI, { /* Some Wave UI options */ })

app.mount('#app')

and how I call the data from js files.

<script>
import {mdiFolderOutline, mdiGithub, mdiOpenInNew} from '@mdi/js';
import {projects} from "@/assets/projects.js";

export default {
  name: "FeaturedProject",
  data: () => ({
    folder: mdiFolderOutline,
    github: mdiGithub,
    open: mdiOpenInNew,
    projects: projects
  })
}
</script>

To optimize the initial load strategy of a Vue application, there are several techniques that can be used:

Code splitting: Splitting your code into smaller chunks allows for faster loads and better caching. This can be achieved using tools like webpack, which has built-in support for code splitting.

Lazy loading: Only loading the components that are needed at a particular moment can speed up the initial load time. Vue provides built-in support for lazy loading through dynamic imports.

SSR (Server-Side Rendering): Pre-rendering pages on the server can significantly improve the initial load time, as the server sends back fully rendered HTML to the client, reducing the amount of work required by the client.

Caching and compression: Enabling caching and compression of assets can also speed up the initial load time. Tools like service workers can help with caching while gzip compression can reduce the size of assets being sent over the network.

Performance optimisations you can do (not only frontend-wise):

• Enable HTTP/3 in server. It has better performance handling multiple requests (like fetching JS files)
• Enable gzip/brotli. You can either do it in the server/CDN or by using webpack (or any other bundler) and configuring production build with a compression plugin.
• Split JS chunks. From what I see you have a lot of unused code. You should use a bundler like webpack and use treeshaking to only fetch code you need in each page.
• Optimise images & fonts. Use jpg and woff2 for smaller sizes.
• Use preconnect & prefetch in HTML <meta> tags as needed.

You can also find more potential optimisations by using Lighthouse in Chrome Dev Tools.

The speed of localhost directly depends on the power of your computer.
If you have an old computer with a running php server, vscode, .... it may be normal that your page takes a long time to refresh.