perf: 懒加载表现优化
- 优化路由首进页面过渡策略,减少遮罩阻塞感 - 为菜单导航增加组件预取,降低首次点击等待 - 缩短页面 loading 遮罩过渡时长
This commit is contained in:
@@ -10,6 +10,39 @@ import { useAuthStore } from '#/store';
|
||||
|
||||
import { generateAccess } from './access';
|
||||
|
||||
interface NetworkConnectionLike {
|
||||
effectiveType?: string;
|
||||
saveData?: boolean;
|
||||
}
|
||||
|
||||
function isSlowNetworkConnection() {
|
||||
if (typeof navigator === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
const nav = navigator as Navigator & {
|
||||
connection?: NetworkConnectionLike;
|
||||
mozConnection?: NetworkConnectionLike;
|
||||
webkitConnection?: NetworkConnectionLike;
|
||||
};
|
||||
const connection =
|
||||
nav.connection ?? nav.mozConnection ?? nav.webkitConnection;
|
||||
if (!connection) {
|
||||
return false;
|
||||
}
|
||||
if (connection.saveData) {
|
||||
return true;
|
||||
}
|
||||
return ['2g', '3g', 'slow-2g'].includes(connection.effectiveType ?? '');
|
||||
}
|
||||
|
||||
function shouldUseRouteProgress() {
|
||||
if (preferences.transition.progress) {
|
||||
return true;
|
||||
}
|
||||
// 普通网络下,loading遮罩不显示时自动回退到顶部进度条
|
||||
return preferences.transition.loading && !isSlowNetworkConnection();
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用守卫配置
|
||||
* @param router
|
||||
@@ -22,7 +55,7 @@ function setupCommonGuard(router: Router) {
|
||||
to.meta.loaded = loadedPaths.has(to.path);
|
||||
|
||||
// 页面加载进度条
|
||||
if (!to.meta.loaded && preferences.transition.progress) {
|
||||
if (!to.meta.loaded && shouldUseRouteProgress()) {
|
||||
startProgress();
|
||||
}
|
||||
return true;
|
||||
@@ -34,7 +67,7 @@ function setupCommonGuard(router: Router) {
|
||||
loadedPaths.add(to.path);
|
||||
|
||||
// 关闭页面加载进度条
|
||||
if (preferences.transition.progress) {
|
||||
if (shouldUseRouteProgress()) {
|
||||
stopProgress();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user