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

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

• • 1、预加载项目必需的组件
  • 2、模块加载优化
  • 3、HMR 热更新优化
  • 4 、环境配置优化
  • 5、代码模式优化
  • 6、高级优化技巧
  • 7、架构级优化
  • 打包压缩配置

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

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

 // 预加载项目必需的组件
    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 自动生成最优预构建配置

npm install vite-plugin-optimize-persist -D

import OptimizationPersist from 'vite-plugin-optimize-persist'

export default {
  plugins: [
    OptimizationPersist()
  ]
}

2、模块加载优化

按需加载架构

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

动态导入辅助

<script setup>
import { defineAsyncComponent } from 'vue'
const HeavyComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)
</script>

3、HMR 热更新优化

文件监听策略

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

智能缓存策略

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

4 、环境配置优化

NODE_OPTIONS="--max-old-space-size=4096" vite

5、代码模式优化

Tree-shaking 增强

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

Dead Code 检测

import { defineConfig } from 'vite'
import deadcode from 'vite-plugin-deadcode'

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

6、高级优化技巧

GPU 加速渲染

.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

内存优化策略

// 使用 WeakMap 存储大型临时数据
const cache = new WeakMap()

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

7、架构级优化

微前端优化

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

Web Workers 优化

// 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' }
              )
            )
          }
        `
      }
    }
  }
}

打包压缩配置

 plugins: [
    viteCompression({
      // gzip静态资源压缩配置
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用压缩
      threshold: 10240, // 启用压缩的文件大小限制
      algorithm: 'gzip', // 采用的压缩算法
      ext: '.gz' // 生成的压缩包后缀
    })
  ],