我面对的是Web应用程序的性能，我不知道如何优化它。我的单页网站，良好的互联网加载在2-3秒，如果我把在2G和3G，它加载在大约+20秒。我已经安装了几个库本地Quasar，和WaveUI（之前我也使用NaiveUI，它花了大约1 M字节，我决定删除它。我如何增加网站的加载量和大小？

我所做的和尝试做的：

• 使用CDN，但它不工作。
• 我使用'defineAsyncComponent来表示“组件的延迟加载”。
• 从CSS/SCSS转换为Sass。

我甚至不使用任何繁重的脚本，我只从js文件中获取并显示数据作为列表，仅此而已。
我的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')

以及如何从js文件中调用数据。

<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>