vue+vite 减缓首屏加载压力和性能优化

vue+vite 减缓首屏加载压力和性能优化

在vue+vite构建的工程里面,性能优化分为开发环境和打包后的生产环境,作为开发首先需要把找个了解清楚,接下来分别解析在开发和生产处理的方案,不多说,直接上代码。

1、预加载项目必需的组件

c 复制代码
 // 预加载项目必需的组件
    optimizeDeps: {
      include: [
        "vue",
        "vue-router",
        "pinia",
        "axios",
        "@vueuse/core",
        "sortablejs",
        "exceljs",
        "path-to-regexp",
        "echarts",
        "@wangeditor/editor",
        "@wangeditor/editor-for-vue",
        "vue-i18n",
        "vue-echarts",
        "echarts-liquidfill",
        "path-browserify",
        "lodash",
        "moment",
      ],
    },

这个配置是写入vite.config.ts 配置文件里面,optimizeDeps和plugins 同级别

2、使用 vite-plugin-optimize-persist 自动生成最优预构建配置

c 复制代码
npm install vite-plugin-optimize-persist -D
c 复制代码
import OptimizationPersist from 'vite-plugin-optimize-persist'

export default {
  plugins: [
    OptimizationPersist()
  ]
}

2、模块加载优化

按需加载架构

c 复制代码
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
}

动态导入辅助

c 复制代码
<script setup>
import { defineAsyncComponent } from 'vue'
const HeavyComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)
</script>

3、HMR 热更新优化

文件监听策略

c 复制代码
export default {
  server: {
    watch: {
      usePolling: true,
      interval: 1000,
      ignored: [
        '**/node_modules/**',
        '**/.git/**',
        '**/dist/**'
      ]
    }
  }
}

智能缓存策略

c 复制代码
export default {
  cacheDir: './.custom_vite_cache',
  build: {
    rollupOptions: {
      cache: false // 开发环境保持启用
    }
  }
}

4 、环境配置优化

c 复制代码
NODE_OPTIONS="--max-old-space-size=4096" vite

5、代码模式优化

Tree-shaking 增强

c 复制代码
export default {
  build: {
    rollupOptions: {
      treeshake: {
        preset: 'recommended',
        moduleSideEffects: (id) => !/\.css$/.test(id)
      }
    }
  }
}

Dead Code 检测

c 复制代码
import { defineConfig } from 'vite'
import deadcode from 'vite-plugin-deadcode'

export default defineConfig({
  plugins: [
    deadcode({
      patterns: ['src/**/*.(js|vue)']
    })
  ]
})

6、高级优化技巧

GPU 加速渲染

c 复制代码
.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

内存优化策略

c 复制代码
// 使用 WeakMap 存储大型临时数据
const cache = new WeakMap()

export function useHeavyCalculation() {
  // 内存敏感操作
}

7、架构级优化

微前端优化

c 复制代码
// 子应用配置
export default {
  build: {
    lib: {
      entry: './src/main.js',
      name: 'vue3Module',
      formats: ['es']
    }
  }
}

Web Workers 优化

c 复制代码
// worker-loader.js
export default function (config) {
  return {
    name: 'worker-loader',
    transform(code, id) {
      if (id.includes('?worker')) {
        return `
          export default function WorkerWrapper() {
            return new Worker(
              URL.createObjectURL(
                new Blob([${JSON.stringify(code)}], 
                { type: 'application/javascript' }
              )
            )
          }
        `
      }
    }
  }
}

打包压缩配置

c 复制代码
 plugins: [
    viteCompression({
      // gzip静态资源压缩配置
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用压缩
      threshold: 10240, // 启用压缩的文件大小限制
      algorithm: 'gzip', // 采用的压缩算法
      ext: '.gz' // 生成的压缩包后缀
    })
  ],
相关推荐
雪碧聊技术1 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了2 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down