使用包时RequireJS模块加载超时
Posted
技术标签:
【中文标题】使用包时RequireJS模块加载超时【英文标题】:RequireJS module load timeout when using bundles 【发布时间】:2015-08-22 03:53:09 【问题描述】:在没有捆绑包的情况下,要求 js 可以正常工作。但是每当我使用捆绑包时,我尝试导入的模块都会超时。
这是我使用 asp.net mvc bundler/minifier 构建捆绑包的方法
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/jquery-version.js",
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
bundles.EnableOptimizations = true;
这是cshtml文件中的require js配置:
<script>
require.config(
baseUrl: "/scripts",
paths:
jquery: "jquery-1.11.2"
,
waitSeconds: 20,
shim:
bootstrap:
deps: ['jquery']
,
bundles:
'@Scripts.Url("~/bundles/test").ToString()': [
'jquery',
'bootstrap',
'moment'
]
);
require(["app/main/test"]);
</script>
以及页面的js(app/main/test):
require(['jquery', 'moment'], function ($, moment)
console.log(moment().format());
);
Jquery、bootstrap 和 moment 库在我创建的测试包中,但我在加载页面时遇到了加载超时。
这是 chrome 检查器错误:
有什么想法吗?
提前致谢。
【问题讨论】:
【参考方案1】:发生这种情况是因为您根本不需要捆绑包。您的 require 调用只有 jquery 和 moment。您已经提供了 jquery 文件路径,因此 requirejs 使用该路径下载并提供 jquery 模块。但由于暂时没有路径定义,它只是您创建的包的一部分。因此 requirejs 尝试通过其模块名称作为路径下载时刻,从而引发错误。
一个简单的解决方法是要求 bundle 本身。
require(['@Scripts.Url("~/bundles/test").ToString()'], function(bundle)
//At this point jquery, moment and bootstrap will be loaded.
);
您可以在上面的示例中直接从全局命名空间中选择使用 jQuery,也可以尝试在下面的示例中单独要求它们。我不确定,但由于循环依赖,您可能会在下面的示例中出错。
require(['@Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment)
//At this point jquery, moment and bootstrap will be loaded.
);
【讨论】:
【参考方案2】:只需从您的捆绑包中删除 'jquery'
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
...
bundles:
'@Scripts.Url("~/bundles/test").ToString()': [
'bootstrap',
'moment'
]
...
您已经在路径中指定了它
paths: jquery: "jquery-1.11.2" ,
似乎 require.js 将模块映射到包,因此一旦作为包的一部分的模块被加载,该包就不会再次加载。
【讨论】:
以上是关于使用包时RequireJS模块加载超时的主要内容,如果未能解决你的问题,请参考以下文章