Vue—— Vue3 + Node.js 后台管理系统 之 【性能优化细节技巧】

背景问题

随着应用复杂度增加，性能问题逐渐显现，需要从多个角度进行优化。

方案思考

• 如何优化渲染性能
• 如何减少内存占用
• 如何优化网络请求

具体实现

防抖节流优化：

// utils/debounce.ts - 防抖节流工具import{ref,onUnmounted}from'vue';// 防抖HookexportfunctionuseDebounce<Textends(...args:any[])=>any>(fn:T,delay:number){lettimeoutId:NodeJS.Timeout|null=null;constdebouncedFn=(...args:Parameters<T>)=>{if(timeoutId){clearTimeout(timeoutId);}timeoutId=setTimeout(()=>{fn(...args);},delay);};// 清理函数constclear=()=>{if(timeoutId){clearTimeout(timeoutId);timeoutId=null;}};onUnmounted(()=>{clear();});return{debouncedFn,clear};}// 节流HookexportfunctionuseThrottle<Textends(...args:any[])=>any>(fn:T,limit:number){letinThrottle:boolean=false;constthrottledFn=(...args:Parameters<T>)=>{if(!inThrottle){fn(...args);inThrottle=true;setTimeout(()=>inThrottle=false,limit);}};returnthrottledFn;}

缓存策略：

// utils/cache.ts - 缓存工具interfaceCacheOptions{maxAge?:number;// 缓存最大存活时间（毫秒）maxSize?:number;// 最大缓存数量}classCache{privatecache:Map<string,{value:any;timestamp:number}>;privateoptions:CacheOptions;constructor(options:CacheOptions={}){this.cache=newMap();this.options={maxAge:5*60*1000,// 默认5分钟maxSize:100,// 默认最大100条...options};}// 设置缓存set(key:string,value:any):void{// 检查缓存大小if(this.cache.size>=this.options.maxSize!){// 删除最旧的缓存项constfirstKey=this.cache.keys().next().value;this.cache.delete(firstKey);}this.cache.set(key,{value,timestamp:Date.now()});}// 获取缓存get(key:string):any|null{constitem=this.cache.get(key);if(!item){returnnull;}// 检查是否过期if(this.options.maxAge&&Date.now()-item.timestamp>this.options.maxAge){this.cache.delete(key);returnnull;}returnitem.value;}// 删除缓存delete(key:string):boolean{returnthis.cache.delete(key);}// 清空缓存clear():void{this.cache.clear();}// 清理过期缓存cleanup():void{constnow=Date.now();for(const[key,item]ofthis.cache){if(this.options.maxAge&&now-item.timestamp>this.options.maxAge){this.cache.delete(key);}}}}// 创建全局缓存实例exportconstglobalCache=newCache();// API缓存装饰器exportfunctioncachedApi<Textends(...args:any[])=>Promise<any>>(fn:T,cacheKey:string,maxAge?:number):T{return((...args:any[])=>{constkey=`${cacheKey}_${JSON.stringify(args)}`;constcached=globalCache.get(key);if(cached){returnPromise.resolve(cached);}returnfn(...args).then(result=>{globalCache.set(key,result);returnresult;});})asT;}

效果验证

通过这些优化技巧，可以显著提升应用性能，改善用户体验。

经验总结

性能优化是一个持续的过程，需要在开发过程中不断关注和改进。