style(api): 统一代码格式化规范
- 调整 import 语句格式,统一空格和引号风格 - 修复函数参数跨行时的格式对齐问题 - 清理多余空行和注释中的空白字符 - 统一对象属性结尾逗号的使用规范 - 规范化字符串拼接和模板语法的格式 - 优化长参数列表的换行和缩进格式
This commit is contained in:
@@ -126,4 +126,4 @@ export default [
|
||||
component: '/passport/register/index.vue',
|
||||
meta: { title: '免费注册' }
|
||||
}
|
||||
];
|
||||
];
|
||||
|
||||
@@ -15,7 +15,7 @@ export interface PerformanceConfig {
|
||||
defaultExpiry: number;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// 懒加载配置
|
||||
lazyLoad: {
|
||||
delay: number;
|
||||
@@ -23,14 +23,14 @@ export interface PerformanceConfig {
|
||||
retries: number;
|
||||
retryDelay: number;
|
||||
};
|
||||
|
||||
|
||||
// 虚拟滚动配置
|
||||
virtualScroll: {
|
||||
itemHeight: number;
|
||||
buffer: number;
|
||||
threshold: number;
|
||||
};
|
||||
|
||||
|
||||
// API 请求配置
|
||||
api: {
|
||||
timeout: number;
|
||||
@@ -38,14 +38,14 @@ export interface PerformanceConfig {
|
||||
retryDelay: number;
|
||||
concurrency: number;
|
||||
};
|
||||
|
||||
|
||||
// 路由配置
|
||||
router: {
|
||||
preloadDelay: number;
|
||||
cacheSize: number;
|
||||
performanceThreshold: number;
|
||||
};
|
||||
|
||||
|
||||
// 监控配置
|
||||
monitoring: {
|
||||
enabled: boolean;
|
||||
@@ -66,33 +66,33 @@ export const defaultPerformanceConfig: PerformanceConfig = {
|
||||
defaultExpiry: 24 * 60 * 60 * 1000 // 24小时
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
lazyLoad: {
|
||||
delay: 200,
|
||||
timeout: 30000,
|
||||
retries: 3,
|
||||
retryDelay: 1000
|
||||
},
|
||||
|
||||
|
||||
virtualScroll: {
|
||||
itemHeight: 50,
|
||||
buffer: 5,
|
||||
threshold: 100
|
||||
},
|
||||
|
||||
|
||||
api: {
|
||||
timeout: 30000,
|
||||
retries: 3,
|
||||
retryDelay: 1000,
|
||||
concurrency: 5
|
||||
},
|
||||
|
||||
|
||||
router: {
|
||||
preloadDelay: 2000,
|
||||
cacheSize: 20,
|
||||
performanceThreshold: 1000
|
||||
},
|
||||
|
||||
|
||||
monitoring: {
|
||||
enabled: process.env.NODE_ENV === 'production',
|
||||
sampleRate: 0.1, // 10% 采样率
|
||||
@@ -104,79 +104,84 @@ export const defaultPerformanceConfig: PerformanceConfig = {
|
||||
export class PerformanceManager {
|
||||
private config: PerformanceConfig;
|
||||
private reportTimer: number | null = null;
|
||||
|
||||
|
||||
constructor(config: Partial<PerformanceConfig> = {}) {
|
||||
this.config = { ...defaultPerformanceConfig, ...config };
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
||||
private init() {
|
||||
// 初始化性能监控
|
||||
if (this.config.monitoring.enabled) {
|
||||
this.startMonitoring();
|
||||
}
|
||||
|
||||
|
||||
// 设置全局错误处理
|
||||
this.setupErrorHandling();
|
||||
|
||||
|
||||
// 优化控制台输出
|
||||
this.optimizeConsole();
|
||||
}
|
||||
|
||||
|
||||
// 开始性能监控
|
||||
private startMonitoring() {
|
||||
this.reportTimer = window.setInterval(() => {
|
||||
this.reportPerformance();
|
||||
}, this.config.monitoring.reportInterval);
|
||||
}
|
||||
|
||||
|
||||
// 上报性能数据
|
||||
private reportPerformance() {
|
||||
if (Math.random() > this.config.monitoring.sampleRate) {
|
||||
return; // 采样控制
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const performanceData = this.collectPerformanceData();
|
||||
|
||||
|
||||
// 这里可以发送到监控服务
|
||||
console.log('Performance Report:', performanceData);
|
||||
|
||||
|
||||
// 可以发送到后端
|
||||
// this.sendToBackend(performanceData);
|
||||
} catch (error) {
|
||||
console.warn('Failed to report performance:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 收集性能数据
|
||||
private collectPerformanceData() {
|
||||
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
|
||||
const navigation = performance.getEntriesByType(
|
||||
'navigation'
|
||||
)[0] as PerformanceNavigationTiming;
|
||||
const memory = (performance as any).memory;
|
||||
|
||||
|
||||
return {
|
||||
// 页面加载性能
|
||||
pageLoad: {
|
||||
domContentLoaded: navigation?.domContentLoadedEventEnd - navigation?.fetchStart,
|
||||
domContentLoaded:
|
||||
navigation?.domContentLoadedEventEnd - navigation?.fetchStart,
|
||||
loadComplete: navigation?.loadEventEnd - navigation?.fetchStart,
|
||||
firstByte: navigation?.responseStart - navigation?.fetchStart
|
||||
},
|
||||
|
||||
|
||||
// 内存使用
|
||||
memory: memory ? {
|
||||
used: Math.round(memory.usedJSHeapSize / 1024 / 1024),
|
||||
total: Math.round(memory.totalJSHeapSize / 1024 / 1024),
|
||||
limit: Math.round(memory.jsHeapSizeLimit / 1024 / 1024)
|
||||
} : null,
|
||||
|
||||
memory: memory
|
||||
? {
|
||||
used: Math.round(memory.usedJSHeapSize / 1024 / 1024),
|
||||
total: Math.round(memory.totalJSHeapSize / 1024 / 1024),
|
||||
limit: Math.round(memory.jsHeapSizeLimit / 1024 / 1024)
|
||||
}
|
||||
: null,
|
||||
|
||||
// 资源加载
|
||||
resources: this.getResourceMetrics(),
|
||||
|
||||
|
||||
// 时间戳
|
||||
timestamp: Date.now()
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// 获取资源指标
|
||||
private getResourceMetrics() {
|
||||
const resources = performance.getEntriesByType('resource');
|
||||
@@ -186,35 +191,35 @@ export class PerformanceManager {
|
||||
failed: 0,
|
||||
avgDuration: 0
|
||||
};
|
||||
|
||||
|
||||
let totalDuration = 0;
|
||||
|
||||
resources.forEach(resource => {
|
||||
|
||||
resources.forEach((resource) => {
|
||||
const duration = resource.duration;
|
||||
totalDuration += duration;
|
||||
|
||||
|
||||
if (duration > 2000) {
|
||||
metrics.slow++;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
metrics.avgDuration = Math.round(totalDuration / resources.length);
|
||||
|
||||
|
||||
return metrics;
|
||||
}
|
||||
|
||||
|
||||
// 设置错误处理
|
||||
private setupErrorHandling() {
|
||||
// 全局错误处理
|
||||
window.addEventListener('error', (event) => {
|
||||
this.handleError('JavaScript Error', event.error);
|
||||
});
|
||||
|
||||
|
||||
// Promise 错误处理
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
this.handleError('Unhandled Promise Rejection', event.reason);
|
||||
});
|
||||
|
||||
|
||||
// Vue 错误处理
|
||||
if (window.Vue) {
|
||||
window.Vue.config.errorHandler = (error, instance, info) => {
|
||||
@@ -222,15 +227,15 @@ export class PerformanceManager {
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 处理错误
|
||||
private handleError(type: string, error: any) {
|
||||
console.error(`${type}:`, error);
|
||||
|
||||
|
||||
// 可以发送错误到监控服务
|
||||
// this.reportError(type, error);
|
||||
}
|
||||
|
||||
|
||||
// 优化控制台输出
|
||||
private optimizeConsole() {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
@@ -240,17 +245,17 @@ export class PerformanceManager {
|
||||
console.info = () => {};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 获取配置
|
||||
getConfig(): PerformanceConfig {
|
||||
return this.config;
|
||||
}
|
||||
|
||||
|
||||
// 更新配置
|
||||
updateConfig(newConfig: Partial<PerformanceConfig>) {
|
||||
this.config = { ...this.config, ...newConfig };
|
||||
}
|
||||
|
||||
|
||||
// 清理资源
|
||||
destroy() {
|
||||
if (this.reportTimer) {
|
||||
@@ -264,32 +269,34 @@ export class PerformanceAdvisor {
|
||||
// 分析性能并给出建议
|
||||
static analyzeAndAdvise() {
|
||||
const advice: string[] = [];
|
||||
|
||||
|
||||
// 检查内存使用
|
||||
const memory = (performance as any).memory;
|
||||
if (memory && memory.usedJSHeapSize > memory.jsHeapSizeLimit * 0.8) {
|
||||
advice.push('内存使用过高,建议清理不必要的缓存和引用');
|
||||
}
|
||||
|
||||
|
||||
// 检查资源加载
|
||||
const resources = performance.getEntriesByType('resource');
|
||||
const slowResources = resources.filter(r => r.duration > 2000);
|
||||
const slowResources = resources.filter((r) => r.duration > 2000);
|
||||
if (slowResources.length > 0) {
|
||||
advice.push(`发现 ${slowResources.length} 个加载缓慢的资源,建议优化`);
|
||||
}
|
||||
|
||||
|
||||
// 检查页面加载时间
|
||||
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
|
||||
const navigation = performance.getEntriesByType(
|
||||
'navigation'
|
||||
)[0] as PerformanceNavigationTiming;
|
||||
if (navigation) {
|
||||
const loadTime = navigation.loadEventEnd - navigation.fetchStart;
|
||||
if (loadTime > 3000) {
|
||||
advice.push('页面加载时间过长,建议优化首屏渲染');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return advice;
|
||||
}
|
||||
|
||||
|
||||
// 获取优化建议
|
||||
static getOptimizationTips() {
|
||||
return [
|
||||
@@ -310,15 +317,19 @@ export const performanceManager = new PerformanceManager();
|
||||
|
||||
// 性能装饰器
|
||||
export function performanceTrack(name: string) {
|
||||
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
|
||||
return function (
|
||||
target: any,
|
||||
propertyKey: string,
|
||||
descriptor: PropertyDescriptor
|
||||
) {
|
||||
const originalMethod = descriptor.value;
|
||||
|
||||
|
||||
descriptor.value = function (...args: any[]) {
|
||||
const startTime = performance.now();
|
||||
|
||||
|
||||
try {
|
||||
const result = originalMethod.apply(this, args);
|
||||
|
||||
|
||||
// 如果是 Promise,等待完成后记录
|
||||
if (result && typeof result.then === 'function') {
|
||||
return result.finally(() => {
|
||||
@@ -326,10 +337,10 @@ export function performanceTrack(name: string) {
|
||||
console.log(`${name} 执行时间: ${duration.toFixed(2)}ms`);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const duration = performance.now() - startTime;
|
||||
console.log(`${name} 执行时间: ${duration.toFixed(2)}ms`);
|
||||
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
const duration = performance.now() - startTime;
|
||||
@@ -337,7 +348,7 @@ export function performanceTrack(name: string) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return descriptor;
|
||||
};
|
||||
}
|
||||
@@ -352,32 +363,32 @@ export class PerformanceChecker {
|
||||
console.warn(`长任务检测: ${entry.duration.toFixed(2)}ms`, entry);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
observer.observe({ entryTypes: ['longtask'] });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 检查布局抖动
|
||||
static checkLayoutShift() {
|
||||
if ('PerformanceObserver' in window) {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
let clsValue = 0;
|
||||
|
||||
|
||||
list.getEntries().forEach((entry) => {
|
||||
if (!(entry as any).hadRecentInput) {
|
||||
clsValue += (entry as any).value;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if (clsValue > 0.1) {
|
||||
console.warn(`布局抖动过大: ${clsValue.toFixed(3)}`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
observer.observe({ entryTypes: ['layout-shift'] });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 检查首次输入延迟
|
||||
static checkFirstInputDelay() {
|
||||
if ('PerformanceObserver' in window) {
|
||||
@@ -389,7 +400,7 @@ export class PerformanceChecker {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
observer.observe({ entryTypes: ['first-input'] });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,11 +7,14 @@ export const APP_SECRET = import.meta.env.VITE_APP_SECRET || '';
|
||||
// 开发商官方网站
|
||||
export const domain = import.meta.env.VITE_DOMAIN || 'https://your-domain.com';
|
||||
// 主节点
|
||||
export const SERVER_API_URL = import.meta.env.VITE_SERVER_API_URL || 'https://your-api.com/api';
|
||||
export const SERVER_API_URL =
|
||||
import.meta.env.VITE_SERVER_API_URL || 'https://your-api.com/api';
|
||||
// 模块节点
|
||||
export const MODULES_API_URL = localStorage.getItem('ApiUrl') || import.meta.env.VITE_API_URL;
|
||||
export const MODULES_API_URL =
|
||||
localStorage.getItem('ApiUrl') || import.meta.env.VITE_API_URL;
|
||||
// 文件服务器地址
|
||||
export const FILE_SERVER = import.meta.env.VITE_FILE_SERVER || 'https://your-file-server.com';
|
||||
export const FILE_SERVER =
|
||||
import.meta.env.VITE_FILE_SERVER || 'https://your-file-server.com';
|
||||
|
||||
/**
|
||||
* 以下配置一般不需要修改
|
||||
|
||||
Reference in New Issue
Block a user