MVC应用JS文件首次加载未生效，如何实现JS版本控制？

针对你遇到的JS修改后浏览器缓存旧代码的问题，以下几种方案可以实现自动或手动的版本控制，避免强制刷新：

1. 利用MVC捆绑内置的内容哈希（推荐） #

ASP.NET MVC的捆绑系统默认支持根据文件内容生成唯一哈希值，当JS文件内容变化时，哈希会自动更新，浏览器会请求新的捆绑文件。

配置步骤： #

• 在BundleConfig.cs中确保启用优化（生产环境默认开启，开发环境可手动设置）：

BundleTable.EnableOptimizations = true;

• 保持原有的捆绑配置不变：

bundles.Add(new ScriptBundle("~/bundles/ClientSetup").Include(
    "~/Scripts/Views/Admin/ClientSetup.js",
    "~/Scripts/Views/Admin/IndicesSetup.js",
    "~/Scripts/Views/Admin/PreferencesSetup.js"));

• 在视图中使用Scripts.Render渲染捆绑：

@Scripts.Render("~/bundles/ClientSetup")

渲染后会自动生成带哈希参数的HTML，哈希值随文件内容动态变化：

<script src="/bundles/ClientSetup?v=abc123xyz..."></script>

2. 手动添加版本号到捆绑路径 #

这种方式简单直接，适合小型项目或快速测试，每次更新JS后手动修改版本号即可：

修改捆绑配置： #

// 将版本号附加到捆绑路径末尾
bundles.Add(new ScriptBundle("~/bundles/ClientSetup?v=20240520").Include(
    "~/Scripts/Views/Admin/ClientSetup.js",
    "~/Scripts/Views/Admin/IndicesSetup.js",
    "~/Scripts/Views/Admin/PreferencesSetup.js"));

视图中仍用@Scripts.Render("~/bundles/ClientSetup?v=20240520")调用，更新JS时同步修改版本号。

3. 基于文件修改时间自动生成版本号 #

通过自定义扩展方法，读取捆绑中JS文件的最后修改时间，自动生成版本参数，无需手动维护：

步骤： #

1. 创建扩展方法类：

public static class BundleExtensions
{
    public static string GetBundleVersion(this HttpContextBase context, string bundlePath)
    {
        var bundle = BundleTable.Bundles.GetBundleFor(bundlePath);
        if (bundle == null) return string.Empty;

        var lastWriteTime = DateTime.MinValue;
        foreach (var file in bundle.EnumerateFiles(context))
        {
            var fileInfo = new FileInfo(file.FullName);
            if (fileInfo.LastWriteTime > lastWriteTime)
            {
                lastWriteTime = fileInfo.LastWriteTime;
            }
        }

        return lastWriteTime.Ticks.ToString();
    }
}

2. 在视图中调用时自动附加版本号：

<script src="@Url.Content("~/bundles/ClientSetup")?v=@Context.GetBundleVersion("~/bundles/ClientSetup")"></script>

JS文件修改后，版本号会随最后修改时间自动更新，浏览器将加载最新文件。

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