ASP.NET MVC Bundle 优化在 Firefox 中导致 jQuery 错误
ASP.NET MVC Bundle optimizations causing errors with jQuery in Firefox
我目前在将 Firefox 运行 的 EnableOptimization 布尔值设置为 true 时遇到问题。目前,所有其他浏览器在此设置下都 运行 完美,只有 Firefox 给出了一致的 jQuery 问题。如果我关闭 EnableOptimizations,它也可以正常运行。
基本上我的解决方案中有两个包。第一个包用作整个应用程序的基础,在 _Layout.cshtml 部分视图中调用。位于此处的文件是 jQuery 1.11.3、jQuery UI、AngularJS 等。第二个包是针对特定视图对脚本进行分组。下面是 BundleConfig 文件的一般结构:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.FileSetOrderList.Clear();
bundles.IgnoreList.Clear();
bundles.UseCdn = true;
Bundle baseBundle = new Bundle("~/bundles/Base");
baseBundle.Include("~/Scripts/jquery-1.11.3.js")
// Includes omitted due to large number of scripts
Bundle indexBundle = new Bundle("~/bundles/Index");
// Includes omitted due to large number of scripts
bundles.Add(baseBundle);
bundles.Add(indexBundle);
#if !DEBUG
BundleTable.EnableOptimizations = true;
#elif DEBUG
BundleTable.EnableOptimizations = true;
#endif
}
bundle 本身包含 30 个或更多脚本,所以我不能告诉你我得到了多少错误,但所有错误都会导致相同的问题,这是我解决方案中 jQuery 的问题.一些例子:
Ex.1:
TypeError: $.fn is undefined
().height("")}}function customScroll({$.fn.mCustomScrollbar&&$(".withScroll").e...
Ex.2:
TypeError: $(...).on is not a function
function toggleBuilder() {
$('.builder-toggle').on('click', function () {
if ($('#builder').hasClass('open')) $('#builder').removeClass('open');
else $('#builder').addClass('open');
});
}
$(document).ready(function () {
toggleBuilder();
});
大部分错误都来自我购买的模板,所以我不想直接接触这些脚本。
这个行为对我来说很奇怪,因为 jQuery 是第一个加载到这个页面的脚本,所以在我看来任何脚本都不可能在加载之前使用 jQuery .更奇怪的是,导致此错误的只是 FireFox。
知道原因是什么吗?
也许其他一些脚本正在覆盖 jQuery?我怎样才能轻松识别它?
更新:
经过一些研究,我决定提醒 $ 的含义。在 Chrome 和其他浏览器中,它是 returns 正确的代码。然而在 Firefox 中,它 returns 这个:
function (out,values,parent,xindex,xcount,xkey) {
var c0=values, a0=Array.isArray(c0), p0=parent, n0=xcount, i0=xindex, k0, v;
if ((v=values['prefix']) != null) out.push(v+'')
out.push('/')
if ((v=values['entityName']) != null) out.push(v+'')
}
事实证明,这是 Sencha ExtJS 代码。现在这是我更新的问题:这怎么可能只有 FireFox 有这个问题,我该如何解决?回想一下,除非有必要,否则我宁愿不触及模板中的任何这些现有脚本。
原来是 ExtJS 脚本没有正确缩小,这就是 Firefox 给出这些错误的原因。在我的解决方案中,其他一切都正常。
我目前在将 Firefox 运行 的 EnableOptimization 布尔值设置为 true 时遇到问题。目前,所有其他浏览器在此设置下都 运行 完美,只有 Firefox 给出了一致的 jQuery 问题。如果我关闭 EnableOptimizations,它也可以正常运行。
基本上我的解决方案中有两个包。第一个包用作整个应用程序的基础,在 _Layout.cshtml 部分视图中调用。位于此处的文件是 jQuery 1.11.3、jQuery UI、AngularJS 等。第二个包是针对特定视图对脚本进行分组。下面是 BundleConfig 文件的一般结构:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.FileSetOrderList.Clear();
bundles.IgnoreList.Clear();
bundles.UseCdn = true;
Bundle baseBundle = new Bundle("~/bundles/Base");
baseBundle.Include("~/Scripts/jquery-1.11.3.js")
// Includes omitted due to large number of scripts
Bundle indexBundle = new Bundle("~/bundles/Index");
// Includes omitted due to large number of scripts
bundles.Add(baseBundle);
bundles.Add(indexBundle);
#if !DEBUG
BundleTable.EnableOptimizations = true;
#elif DEBUG
BundleTable.EnableOptimizations = true;
#endif
}
bundle 本身包含 30 个或更多脚本,所以我不能告诉你我得到了多少错误,但所有错误都会导致相同的问题,这是我解决方案中 jQuery 的问题.一些例子:
Ex.1:
TypeError: $.fn is undefined
().height("")}}function customScroll({$.fn.mCustomScrollbar&&$(".withScroll").e...
Ex.2:
TypeError: $(...).on is not a function
function toggleBuilder() {
$('.builder-toggle').on('click', function () {
if ($('#builder').hasClass('open')) $('#builder').removeClass('open');
else $('#builder').addClass('open');
});
}
$(document).ready(function () {
toggleBuilder();
});
大部分错误都来自我购买的模板,所以我不想直接接触这些脚本。
这个行为对我来说很奇怪,因为 jQuery 是第一个加载到这个页面的脚本,所以在我看来任何脚本都不可能在加载之前使用 jQuery .更奇怪的是,导致此错误的只是 FireFox。
知道原因是什么吗? 也许其他一些脚本正在覆盖 jQuery?我怎样才能轻松识别它?
更新: 经过一些研究,我决定提醒 $ 的含义。在 Chrome 和其他浏览器中,它是 returns 正确的代码。然而在 Firefox 中,它 returns 这个:
function (out,values,parent,xindex,xcount,xkey) {
var c0=values, a0=Array.isArray(c0), p0=parent, n0=xcount, i0=xindex, k0, v;
if ((v=values['prefix']) != null) out.push(v+'')
out.push('/')
if ((v=values['entityName']) != null) out.push(v+'')
}
事实证明,这是 Sencha ExtJS 代码。现在这是我更新的问题:这怎么可能只有 FireFox 有这个问题,我该如何解决?回想一下,除非有必要,否则我宁愿不触及模板中的任何这些现有脚本。
原来是 ExtJS 脚本没有正确缩小,这就是 Firefox 给出这些错误的原因。在我的解决方案中,其他一切都正常。