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

在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' // 生成的压缩包后缀})],