Vue应用性能优化（缩减体积）求助

我的单页网站在网络良好时加载需2-3秒，但在2G/3G网络下加载时长超20秒。目前本地引入了Quasar和WaveUI两个UI库（之前用的NaiveUI占约1M字节，已决定移除）。想请教如何提升加载速度、缩减包体积？

已尝试的优化操作 #

• 使用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')

数据调用示例（FeaturedProject.vue） #

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

一、UI库精简：避免重复引入+按需加载 #

同时使用Quasar和WaveUI两个完整UI框架会产生大量冗余代码，建议二选一（比如保留生态更成熟、优化工具更多的Quasar），移除WaveUI后用Quasar组件替代w-app、w-flex这类WaveUI组件。

如果必须保留两个库，强制开启按需加载：

• Quasar：在配置文件中仅引入用到的图标、组件，不要全量导入；用import { QFlex, QLayout } from 'quasar'替代全局注册。
• WaveUI：查看官方文档开启按需引入，不要直接全量注册WaveUI，只加载用到的组件。

二、打包体积深度优化 #

1. 启用Tree Shaking：在package.json中添加"sideEffects": false（无特殊副作用代码时），让打包工具自动剔除未使用的代码。
2. 压缩资源：
   • 开启Vite/Webpack生产环境压缩，比如Vite配置build.minify: 'terser'和build.cssMinify: true。
   • 图片转WebP格式，或用插件自动压缩静态图片。
3. 拆分代码包：除组件懒加载外，将第三方库拆为独立chunk，比如Vite中配置optimizeDeps.include把Quasar、WaveUI单独打包，利用浏览器缓存。
4. 图标轻量化：当前@mdi/js按需引入单个图标的方式没问题，可进一步用SVG内联替代，或只保留用到的图标子集。

三、CDN优化：修正配置逻辑 #

之前CDN未生效大概率是配置错误，以Vite为例，正确配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue': 'https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js',
      'quasar': 'https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.umd.prod.js'
    }
  }
})

同时要在main.js中去掉对应import语句，改用全局变量调用，比如const { Quasar } = window.Quasar，并选择国内可稳定访问的CDN节点。

四、首屏体验优化 #

1. 添加骨架屏：在App.vue根组件中加入骨架屏，首屏组件加载完成后再替换，降低用户等待感知。
2. 调整首屏组件优先级：FirstSection作为首屏核心内容，不要和其他组件一起懒加载，或用preload预加载其chunk文件。
3. 精简全局样式：检查Quasar和WaveUI的全局CSS，移除未使用的部分，比如Quasar的index.sass可替换为仅引入用到的组件样式。

五、网络层面优化 #

1. 启用Gzip/Brotli压缩：在服务器端配置Gzip或Brotli压缩，大幅减小传输体积，低网络环境下效果显著。
2. 设置HTTP缓存策略：给JS/CSS文件设置Cache-Control: max-age=31536000, immutable，图片等静态资源设置较长缓存时间，减少重复请求。

内容的提问来源于stack exchange，提问作者Temka