Vue.js高级异步组件路由加载问题：超时重试与请求中止

首先咱们拆解下你遇到的两个核心问题：

1. 超时后chunk请求没中止：原生import()发起的请求没法直接被中断，webpack会继续加载这个chunk，哪怕已经显示错误组件；
2. 返回路由直接显示错误组件：import()返回的Promise一旦失败会被webpack缓存，下次进入路由时直接复用这个失败状态，不会重新发起请求。

下面是分步解决方案：

第一步：让每次路由进入都重新发起请求（解决重试问题） #

原来的代码里，你直接把import('@routes/Abc/index.vue')的结果传给lazyLoadView，这会导致import()在路由初始化时就执行，Promise结果被缓存。我们需要把import()包装成函数，每次进入路由时才执行，确保每次都发起新请求。

修改lazyLoadView函数：

function lazyLoadView(getAsyncView: () => Promise<any>) {
  const AsyncHandler = () => ({
    // 每次调用AsyncHandler时，都执行getAsyncView获取新的Promise
    component: getAsyncView(),
    loading: ComponentLoading,
    delay: 0,
    error: ComponentError,
    timeout: 6000,
  });
  return Promise.resolve({
    functional: true,
    render(h: any, { data, children }: any) {
      return h(AsyncHandler, data, children);
    },
  });
}

更新路由配置，把import()包装成函数传入：

export const routes = [
  { 
    path: '/abc', 
    // 注意这里是 () => import(...)，而非直接import(...)
    component: () => lazyLoadView(() => import('@routes/Abc/index.vue')), 
  },
  { 
    path: '/def', 
    component: () => lazyLoadView(() => import('@routes/def/index.vue')), 
  },
];

这样修改后，每次切换回/abc路由，都会重新发起chunk加载请求，不再复用之前失败的缓存。

第二步：中止超时的chunk请求（优化网络体验） #

原生import()不支持直接中断请求，我们可以封装一个带中止逻辑的加载函数，用AbortController配合动态script标签来控制请求生命周期。

封装带超时中止的加载函数：

/**
 * 带超时中止的组件加载函数
 * @param modulePath 组件模块路径
 * @param timeout 超时时间，默认6000ms
 */
async function loadComponentWithAbort(modulePath: string, timeout = 6000) {
  return new Promise((resolve, reject) => {
    const controller = new AbortController();
    const signal = controller.signal;

    // 动态创建script标签加载chunk
    const script = document.createElement('script');
    // 利用webpack的require.resolveWeak获取模块真实路径（仅webpack环境有效）
    const chunkUrl = require.resolveWeak(modulePath);
    script.src = chunkUrl;
    script.type = 'module';
    script.async = true;

    let isLoaded = false;

    // 加载成功后清理资源并导入组件
    script.onload = async () => {
      isLoaded = true;
      clearTimeout(timeoutTimer);
      document.head.removeChild(script);
      const component = await import(modulePath);
      resolve(component.default);
    };

    // 加载失败处理
    script.onerror = () => {
      if (!isLoaded) {
        reject(new Error('Chunk加载失败'));
        document.head.removeChild(script);
      }
    };

    // 中止请求时的处理
    signal.addEventListener('abort', () => {
      if (!isLoaded) {
        document.head.removeChild(script);
        reject(new Error('超时中止Chunk加载'));
      }
    });

    // 超时触发中止
    const timeoutTimer = setTimeout(() => {
      controller.abort();
    }, timeout);
  });
}

更新路由配置里的调用：

export const routes = [
  { 
    path: '/abc', 
    component: () => lazyLoadView(() => loadComponentWithAbort('@routes/Abc/index.vue')), 
  },
  { 
    path: '/def', 
    component: () => lazyLoadView(() => loadComponentWithAbort('@routes/def/index.vue')), 
  },
];

这样，当加载超时后，会立即中止对应的script请求，避免无效的网络资源占用。

第三步：给错误组件添加手动重试功能（提升用户体验） #

如果用户遇到加载失败，可以通过点击按钮手动重试，这需要在错误组件里清除webpack的模块缓存，再重新触发路由加载。

修改ComponentError组件：

<template>
  <div class="error-container">
    <h3>组件加载失败了 😢</h3>
    <p>可能是网络问题，请重试</p>
    <button class="retry-btn" @click="handleRetry">重新加载</button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { inject } from 'vue';

const router = useRouter();
// 从父组件注入当前组件的模块路径
const modulePath = inject<string>('modulePath');

const handleRetry = () => {
  if (modulePath && typeof __webpack_module_cache__ !== 'undefined') {
    // 清除webpack的模块缓存
    const moduleId = require.resolveWeak(modulePath);
    delete __webpack_module_cache__[moduleId];
  }
  // 强制刷新当前路由，触发重新加载
  router.replace({
    path: router.currentRoute.value.fullPath,
    force: true,
  });
};
</script>

<style scoped>
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
}
.retry-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #42b983;
  color: white;
  cursor: pointer;
}
</style>

修改lazyLoadView函数，给错误组件注入模块路径：

function lazyLoadView(getAsyncView: () => Promise<any>, modulePath: string) {
  const AsyncHandler = () => ({
    component: getAsyncView(),
    loading: ComponentLoading,
    delay: 0,
    error: ComponentError,
    timeout: 6000,
  });
  return Promise.resolve({
    functional: true,
    render(h: any, { data, children }: any) {
      // 用provide给错误组件传递模块路径
      data.provide = data.provide || {};
      data.provide.modulePath = modulePath;
      return h(AsyncHandler, data, children);
    },
  });
}

最后更新路由配置，传入模块路径：

export const routes = [
  { 
    path: '/abc', 
    component: () => lazyLoadView(
      () => loadComponentWithAbort('@routes/Abc/index.vue'),
      '@routes/Abc/index.vue'
    ), 
  },
  { 
    path: '/def', 
    component: () => lazyLoadView(
      () => loadComponentWithAbort('@routes/def/index.vue'),
      '@routes/def/index.vue'
    ), 
  },
];

这样用户看到错误组件时，点击重试按钮就能清除缓存并重新发起组件加载请求。

内容的提问来源于stack exchange，提问作者void