Tengo un módulo js, llamémoslo A . Utiliza el control de versiones agregando ?v=xxxxxxxxxxxx en su URL (como <script src="/Scripts/A.js?v=637082108844148373"></script> ). v cambia cada vez que hacemos cambios en el archivo.
Aquí está el código:
public static class UrlHelperExtensions { public static string Content(this UrlHelper helper, string filename, bool versioned) { var result = filename; if (versioned) { var lastWriteTimeToken = CalculateToken(helper.RequestContext.HttpContext, filename); result = filename + "?v=" + lastWriteTimeToken; } return helper.Content(result); } }Y luego podemos usarlo en las vistas de Razor de la siguiente manera:
// Sample.cshtml // ... code omitted for the sake of brevity ... @section scripts { <script type="module" src="@Url.Content("~/Scripts/A.js", true)"></script> } // ... code omitted for the sake of brevity ... El módulo importa los módulos B.js y C.js :
// A.js import {Foo} from "./B.js"; import {Bar} from "./C.js"; Si cambio algo en el módulo A.js , el caché del navegador del cliente se rompe porque tenemos el parámetro ?v que cambia cada vez que hacemos cambios en A.js Pero si cambio algo en el módulo B.js o C.js , su versión sigue siendo la misma y tengo que borrar el caché manualmente ( CTRL + F5 ) para ver los cambios.
En otras palabras, no podemos usar el parámetro ?v para las líneas:
import {Foo} from "./B.js"; import {Bar} from "./C.js";¿Cómo resolver este problema de eliminación de caché para archivos importados en MVC 5?
Encabezado HTTP
Puede usar el encabezado HTTP para indicarle al navegador que no-cache o que limpie el caché después de un breve período de tiempo.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
Nuevos caminos para B y C
Si prefiere ceñirse al control de versiones, también puede poner los módulos B y C en una carpeta nueva (número de versión) y volver a escribir las rutas en el módulo A. Por supuesto, no querrá hacerlo manualmente, sino a través de un script ( que idealmente se ejecuta al guardar).
Transpilar A, B y C en un solo archivo
Más fácil sería transpilar los paquetes en un solo archivo, para el cual su control de versiones ya funciona. Puede usar esbuild con --bundle para eso u otra cosa: hay múltiples opciones (también extensiones que se ejecutan "al guardar").
Trabajaría hacia atrás desde el estado de implementación final deseado de su archivo index.html. My Demo SPA produce esta salida, pero el código de la aplicación no necesita lidiar con ningún problema relacionado con la memoria caché.
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <base href='/spa/' /> <title>OAuth Demo App</title> <link rel='stylesheet' href='bootstrap.min.css?t=1648582395628' integrity='sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs='> <link rel='stylesheet' href='app.css?t=1648582395628' integrity='sha256-B7pu+gcFspulW4zXfgczVtPcEuZ81tZRFYeRciEzWro='> <body> <div id='root' class='container'></div> <script type='module' src='vendor.bundle.js?t=1648582395628' integrity='sha256-g0/+kYJcpXM7K5tvtIwBx//nKV3mCR8Y6NktYGHgpW0='></script> <script type='module' src='app.bundle.js?t=1648582395628' integrity='sha256-YY15iWJ0R9wnYkc1BP9yBYMlPNCeGFJBWFhio6z8Y1Q='></script> </body> </html>PASO DE CONSTRUCCIÓN
En mi caso, estoy usando un paso de compilación de Webpack , que mantiene el código de la aplicación simple. Mientras tanto, los módulos de la aplicación dependen unos de otros de forma sencilla.
TECNOLOGÍA DEL LADO DEL SERVIDOR
Esto será más difícil si está mezclando el código del lado del servidor y del lado del cliente para administrar Javascript, y personalmente no soy un fanático de tales pilas de tecnología. Sin embargo, se aplican los mismos principios, por lo que buscaría opciones de agrupación y un paso de compilación para resolver su problema. El código de la aplicación no debe saber nada acerca de las URL de prevención de caché.
Para simplificar, si la etiqueta del script es detallada, puede incluir una lista de archivos para verificar.
<script type="module" src="@Url.Content("~/Scripts/A.js", true, new string[]{ "~/Scripts/B.js","~/Scripts/C.js"})"></script>Luego modifique su ayudante para incluirlos en el token.
public static class UrlHelperExtensions { public static string Content(this UrlHelper helper, string filename, bool versioned, string[] cacheCheck) { var result = filename; if (versioned) { var cacheChecks = cacheCheck.ToList(); cacheChecks.Add(filename); var lastWriteTimeToken = new List<string>(); foreach (var item in cacheChecks) { lastWriteTimeToken.Add(CalculateToken(helper.RequestContext.HttpContext, item)); } result = filename + "?v=" + String.Join("", lastWriteTimeToken.ToArray()); } return helper.Content(result); } }Sin probar :)