從瀏覽器緩存中訪問文件時需要JS Refress Issue

Question

正在使用requiredjs。部署到任何環境（現在的本地截圖）之後，會出現刷新問題。頁面加載不正確。我檢查了螢火蟲的網絡標籤。其顯示（下圖）。當文件得到200 OK（BF Cache）狀態時，頁面加載不正常。

錯誤：

給Ctrl + F5

完所有頁面來了正常。

​​

一段時間，我需要給很多CTRL + F5的則只有其工作asexpected

我requirejs配置文件：

require.config({ 
    baseUrl: "../../../../../../../Scripts", 
    //waitSecond: 0, 
    //urlArgs : "q="+new Date().getTime(), 
    enforcedefine: true, 
    paths: { 
     //RequireJS Plugins. 
     'text': 'lib/requirejs/text', 
     'domReady': 'lib/requirejs/domReady', 
     'app': 'app', 
     'noext': 'lib/requirejs/noext', 

     // Shared Libraries. 
     'jquery': 'lib/Kendo/jquery.min', 
     'jqueryMigrate': 'lib/jquery-migrate-1.2.1.min', 
     'jszip': 'lib/jszip', 
     'kendo': 'lib/Kendo/kendo.all.min', 
     'materialize': 'lib/materialize/materialize', 
     'jqueryValidate': 'jquery.validate.min', 
     'jsignature': 'lib/jSignature/jSignature.min', 
     'jqueryMaskedinput': 'lib/jquery/jquery.maskedinput.min', 
     'jqueryMd5': 'lib/jquery/jquery.md5', 
     'truckNotifier': 'Controls/serviceTruck.Notifier' 
    }, 
    shim: { 
     'app': { 
      deps: ['kendo'] 
     }, 
     'kendo': { 
      deps: ['jquery', 'jszip'], 
     }, 
     'jqueryExtensions': { 
      deps: ['jquery'], 
     }, 
     'materialize': { 
      deps: ['jquery', 'kendo'], 
     }, 
     'krossRespJs': { 
      deps: ['jquery'], 
     }, 
     'jqueryMaskedinput': { 
      deps: ['jquery'], 
     }, 
     'truckUploadSelector': { 
      deps: ['jquery'], 
     }, 
     'underscore': { 
      exports: '_' 
     } 
    } 
}); 

app.js文件：

(function (factory) { 
    if (typeof define === 'function' && define.amd) { 
     // AMD. Register as an anonymous module. 
     define([ 
      'domReady!', 
      'text', 
      'noext', 
      'jquery', 
      'kendo', 
      'jszip', 
      'truckNotifier' 
     ], factory); 
    } else { 
     // Browser globals 
     factory(jQuery); 
    } 
}(function (domReady,text,noext,$,kendo,jszip,truckNotifier) { 
    'use strict'; 
    var app = kendo.observable({ 
     // ---- PUBLIC FIELDS ---- 
     DATE_FORMAT: 'MM/dd/yyyy', 
     DATE_MASK: '99/99/9999', 
     DATE_TIME_FORMAT: 'MM/dd/yyyy HH:mm', 
     DATE_TIME_MASK: '99/99/9999 99:99', 
     PHONE_MASK: '(999) 999-9999', 
     TIME_FORMAT: 'HH:mm', 
     TIME_MASK: '99:99', 
     $notifier: $('#notify_container'), 
     router: new kendo.Router(), 
     isInitialized: false, 
     /** This call sets up background components of the current page. */ 

     initialize: function() { 
      var self = this; 
      // Initialize this first so it can show loading while the rest 
      // of this module loads. 

      if (!self.isInitialized) { 
       $('.link-external').attr('target', '_blank'); 

       $('#notify_container').serviceTruckNotifier(); 
       self.isInitialized = true; 
      } 

      window.JSZip = jszip; 

     }, 
     showPleaseWait: function (show) { 
     }, 
     /* Pops up a notification at the top of the page. */ 
     notify: function (type, message) { 
      var types = { 
       'push': 'notifyPush', 
       'info': 'notifyInfo', 
       'success': 'notifySuccess', 
       'error': 'notifyError', 
       'warn': 'notifyWarn', 
       'expired': 'notifyExpired' 
      }; 
      this.$notifier.serviceTruckNotifier(types[type], message); 
     } 
    }); 
    app.initialize(); 
    return app; 
})); 

在查看頁面中使用

腳本：

<script> 
    require([ 
     'domReady!', 
     'text', 
     'noext', 
     'app', 
     'jquery', 
     'jqueryValidate', 
     'kendo', 
     'truckNotifier' 
    ], 
    function (
     domReady, 
     text, 
     noext, 
     app, 
     $, 
     jqueryValidate, 
     kendo, 
     truckNotifier 
     ) { 
     var notifier = $('#notify_container'), 
      message = '@(ViewBag.Message)'; 
     $("#primaryTextButton").kendoButton(); 
     $('.all-content').removeClass('dn'); 
     $('.mcenter').addClass('dn'); 
     if (message != "") { 
      notifier.serviceTruckNotifier("notifyExpired", "@C.LINK_HAS_BEEN_EXPIRED"); 
     } 
    }); 
</script> 

HTML文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/Styles/all/css") 
    <script src="~/Scripts/lib/requirejs/require.js"></script> 
    <script src="~/Scripts/config.js"></script> 

</head> 
<body id="@RenderSection("BodyId", false)"> 
    @{ 
     System.Reflection.Assembly web = typeof(ServiceTruck.Web.Models.ExternalLogin).Assembly; 

     System.Reflection.Assembly assembly = System.Reflection.Assembly.GetExecutingAssembly(); 
     System.Diagnostics.FileVersionInfo fvi = System.Diagnostics.FileVersionInfo.GetVersionInfo(web.Location); 
     string version = fvi.FileVersion; 

     System.Reflection.AssemblyName webName = web.GetName(); 
     string myVersion = version.ToString(); 
     ViewBag.Version = myVersion; 
    } 

    @RenderSection("featured", required: false) 
    <section class="container-fluid"> 
     @RenderBody() 
    </section> 
    <!-- Service Truck Layout Footer Start --> 
    <footer class="copy-right"> 
     <div class="col-md-6 text-left"> 
      <p>All rights reserved.</p> 
      <p>Copyright © 2016 <a href="#">Name</a>.</p> 
     </div> 
     <div class="col-md-6 text-right"> 
      <p>Build @myVersion</p> 
      <p>Recommended Browsers: Internet Explorer 11, Firefox 48, Chrome 52</p> 
     </div> 
    </footer> 
    <!-- Service Truck Layout Footer End --> 
    @RenderSection("scripts", required: false) 

</body> 
</html> 

Answer 1

有一點是肯定錯了你的配置是shim爲app：

'app': { 
     deps: ['kendo'] 
    }, 

您的app模塊是AMD模塊：它稱爲define。所以你不能使用shim。設置shim對於無法從中受益的模塊可能會導致未定義的行爲。

我已經對此進行過實驗並且從RequireJS的一個版本得到了不一致的結果。關鍵是爲AMD模塊設置shim沒有定義的語義。