从浏览器缓存访问文件时需要JS Refress Issue

Question

Am using requiredjs. After deployment to the any environment (now screenshot from local) am getting refresh issue. page is not loading properly. I have checked in network tab in firebug. its showing(below image). when the file get 200 OK (BF Cache) status, page not loading properly.

Error:

After giving ctrl+f5

all the pages are coming correctly.

some time i need to give lot of ctrl+f5 then only its working asexpected

my requirejs config file:

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 file:

(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 used in View Page:

<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 FILE:

<!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

One thing that is definitely wrong with your configuration is the shim for app :

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

Your app module is an AMD module: it calls define . So you cannot use a shim for it. Setting a shim for a module that cannot benefit from one can lead to undefined behavior.

I've run experiments with this at times and got inconsistent results from one version of RequireJS to the next. The point is that setting a shim for an AMD module has no defined semantics.