前端 - vite如何实现js或css文件加载失败的自动重试？

Question

有2个前后端分离的项目，前端代码分别使用webpack和vite进行构建。
因为服务器某些改动影响，导致在环境上前端的静态资源文件加载可能会出现随机性的偶然失败（SSL认证失败），问题根因是已知的，现在考虑前端侧如何去规避。
使用webpack构建的项目可以使用 webpack-retry-chunk-load-plugin 规避。
但是vite好像搜不到类似的插件可以实现？

Answer 1

这个不应该是开发脚手架的工作，哪里出问题就修哪里，该修服务器就去修服务器。

Answer 2

vite 使用 import() 加载模块, 所以没办法在运行时对加载失败的资源进行重试. 见官方成员回复: retry chunk load plugin #11967

你可以把 vite 打包替换成 webpack 打包解决这个问题, 不过修改服务器的问题才是最好的解决方式

Answer 3

当使用 Vite 进行构建时，你可以通过自定义插件来实现自动重试加载失败的 JavaScript 或 CSS 文件。Vite 提供了插件系统，允许你扩展构建过程并处理各种任务。

以下是一个简单的示例，展示如何使用 Vite 插件实现自动重试加载失败的静态资源文件：

首先，创建一个名为 vite-retry-load-plugin.js 的文件，并在其中编写以下代码：

const { defineConfig } = require('vite');// 定义插件配置const plugin = {  name: 'vite-retry-load-plugin',  configResolved(config) {    // 修改静态资源文件的加载配置    config.build.outFiles = config.build.outFiles.map(file => {      return {        ...file,        loader: 'url-loader', // 假设你的静态资源文件使用 url-loader 进行加载        options: {          ...file.options,          // 自动重试加载失败的文件          onLoadError: true,        },      };    });  },};// 导出插件配置module.exports = defineConfig({ plugins: [plugin] });

接下来，在你的 Vite 项目根目录下创建一个名为 vite.config.js 的文件，并将以下代码添加到该文件中：

import { defineConfig } from 'vite';import viteRetryLoadPlugin from './vite-retry-load-plugin'; // 引入自定义插件export default defineConfig({  plugins: [viteRetryLoadPlugin], // 添加自定义插件到构建配置中});

通过以上步骤，你已经创建了一个自定义的 Vite 插件，该插件会在构建过程中修改静态资源文件的加载配置，以实现自动重试加载失败的文件。现在，当你运行 Vite 构建项目时，Vite 将使用自定义的插件配置来处理加载失败的静态资源文件。