RequireJS 是否从缓存中加载以前加载的文件（.Js 或 .html）？

Question

我在我的应用中使用 requireJs。我面临一个场景，我想清除它。 我正在根据位置 url 或 routes 加载特定模板（视图）及其依赖的 js 文件。请参阅以下代码示例。

routes: {
            '/': {
                templateUrl: 'views/login.html',
                dependencies: [
                    'scripts/controllers/login.js',
                ]
            },
            '/abc-view': {
                templateUrl: 'views/abc.html',
                requireLogin: true,
                dependencies: [
                    'scripts/controllers/abc.js',
                    'scripts/controllers/xyz.js',
                ]
            },
            '/xyz-view': {
                templateUrl: 'views/xyz.html',
                requireLogin: true,
                dependencies: [
                    'scripts/controllers/xyz',
                    }
        }

当我更改为 xyz 视图时，将加载 xyz.js 文件。我的问题是，当我更改为 abc 视图时，是否会加载 xyz.js 如果是，那么它会从缓存中加载吗？

我在 newtwork 选项卡中看到它再次加载相同的文件，即 xyz.js，而不是从缓存中与已经包含在一个模板中的 html 模板相同 ng-inlcude 它不会从缓存中加载。

任何帮助将不胜感激。谢谢。

我的申请流程如下： index.html有

<script type="text/javascript" src="libs/requirejs/require.js" data-main="config.js"></script>

在Config.js 中，我正在手动引导应用程序。

requirejs.config({

  "paths":{
        "angular": "libs/angular/angular.min",
        "angular-route":"libs/angular-route/angular-route",
        "angular-sanitize":"libs/angular-sanitize/angular-sanitize",
        "jquery-ui":"libs/jquery-ui/jquery-ui.min",                
        "ngAnimate":"libs/angular-animate/angular-animate.min",
                "angularSrapCore":"libs/angular-strap/dist/angular-strap.min",
        "angularStrap":"libs/angular-strap/dist/angular-strap.tpl.min"
    },
    "shim": {
            "angular": {
              "exports": "angular"
            },
            "drutasApp": {

                    deps: ["angular", "angular-route","angular-sanitize","jquery-ui","ngAnimate"]

            },
            "angular-route": {
                    deps: ["angular"]
            }
        }
});

require(['angular','app'     
                    ], function (angular) {
    angular.element(document).ready(function () {console.log("app bootstraped");
            angular.bootstrap(document, ['app']);
        });
});

app.js与config.js在同一目录下，代码如下...

define(['scripts/routes.js','scripts/services/dependencyResolverFor.js'], function(config, dependencyResolverFor)
{
    var app = angular.module('app', ['ngRoute','ngAnimate','ngSanitize']);

    app.config(
    [
        '$routeProvider',
        '$locationProvider',
        '$controllerProvider',
        '$compileProvider',
        '$filterProvider',
        '$provide',

        function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
        {
            app.controller = $controllerProvider.register;
            app.directive  = $compileProvider.directive;
            app.filter     = $filterProvider.register;
            app.factory    = $provide.factory;
            app.service    = $provide.service;
            app.constant   = $provide.constant;

            $locationProvider.html5Mode(false);

            if(config.routes !== undefined)
            {
                angular.forEach(config.routes, function(route, path)
                {
                    $routeProvider.when(path, {
                        templateUrl:route.templateUrl,
                        resolve:dependencyResolverFor(route.dependencies)
                    });
                });
            }

            if(config.defaultRoutePaths !== undefined)
            {
                $routeProvider.otherwise({redirectTo:config.defaultRoutePaths});
            }
        }
    ]);

   return app;
});



`routes.js` is as following...

define([], function()
{
    return {
        defaultRoutePath: '/',
        routes: {
            '/': {
                templateUrl: 'views/home.html',
                dependencies: [
                    'scripts/controllers/home'
                ]
            },
            '/abc-view': {
                templateUrl: 'views/abc.html',
                dependencies: [
                    'scripts/controllers/abc',
                    'scripts/controllers/xyz'
                ]
            },
            '/xyz-view': {
                templateUrl: 'views/xyz.html',
                dependencies: [
                    'scripts/controllers/xyz'
                ]
            }
        }
    };
});

dependencyResolver.js

    define([], function()
{
    return function(dependencies)
    {
        var definition =
        {
            resolver: ['$q','$rootScope', function($q, $rootScope)
            {
                var deferred = $q.defer();

                require(dependencies, function()
                {
                    $rootScope.$apply(function()
                    {
                        deferred.resolve();
                    });
                });

                return deferred.promise;
            }]
        }

        return definition;
    }
});

Answer 1

---

我的问题是当我更改为 abc 视图时，是否会加载 xyz.js

不，requireJS 将判断要获取的脚本标签的最终URL。如果之前已经加载过，requireJS 不会做任何事情。

---

如果是，那么它会从缓存中加载吗？

不太可能使用缓存，但requireJS 只是检测之前是否加载了具有相同URL 的相同文件。如果之前加载过，requireJS 只会执行你的js而不加载任何东西。

---

我在 newtwork 选项卡中看到它再次加载相同的文件，即 xyz.js，而不是从缓存中与已经包含在 ng-inlcude 的一个模板中的 html 模板相同，它不会从缓存中加载。

在查看您的代码时，requireJS 必须用于获取依赖项。这种行为不会发生，除非requirejs.undef() 在某处被调用。或者那是 requireJS 的旧版本，其中模块的 URL 没有被跟踪，<script> 无论条件如何都必须加载。

---

注意我不确定 requireJS 的 2.1.x 之前版本的行为。