簡體   English   中英

在縮小javascript時,System.Web.Optimization會更改js文件的順序

[英]System.Web.Optimization changes order of js files when minifying javascript

使用System.Web.Optimization縮小文件時,我觀察到一種非常奇怪的行為,我已經在使用IBundleOrderer ,當我沒有縮小文件時,它可以很好地保存文件順序

public class RespectGivenBundleOrder : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

public static void RegisterTestingBundle(BundleCollection bundles)
    {
        var bundle = new ScriptBundle("~/OnTheMoveWebFiles/bundles/Testing");
        bundle.Orderer = new RespectGivenBundleOrder();
        bundle.Include(
            string.Format("{0}jquery-{{version}}.js", baseJSFolder),
            string.Format("{0}ua-parser.js", baseJSFolder),
            string.Format("{0}OnTheMove_Core.js", baseJSFolder),
            string.Format("{0}OnTheMove_TheApplication.js", baseJSFolder),
            string.Format("{0}OnTheMove_JQMQueryString.js", baseJSFolder),
            string.Format("{0}OnTheMove_OfflineAuditing.js", baseJSFolder),
            string.Format("{0}OnTheMove_DatabaseManager.js", baseJSFolder),
            string.Format("{0}OnTheMove.js", baseJSFolder),
            string.Format("{0}OnTheMove_Offline.js", baseJSFolder),
            string.Format("{0}OnTheMove_DatabaseLoader.js", baseJSFolder),
            string.Format("{0}OnTheMove_DatabaseTestHelper.js", baseJSFolder),
            string.Format("{0}OnTheMove_SmartScriptPlayer.js", baseJSFolder),
            string.Format("{0}jasmine.js", baseJSFolder),
            string.Format("{0}jasmine-html.js", baseJSFolder),
            string.Format("{0}jasmine-jquery-{{version}}.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove-GenericMocksAndHelpers.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove-DatabaseManager-SiebelToSQL-Tests.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove-TreeValidator-Tests.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove-GlobalFunction-Tests.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove-OnTheMove_BusinessComponent-Tests.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove_DatabaseTestHelper-Tests.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove_OfflineAuditing-Tests.js", baseJSFolder),
            string.Format("{0}jasmine-OnTheMove-JQueryExtension-Tests.js", baseJSFolder));
        bundles.Add(bundle);
    }

但是當我開始縮小時,我會收到javascript錯誤,並且通過檢查chrome開發人員工具中縮小文件的開頭,我可以立即看到該訂單搞砸了。

在我執行var cont = new BundleResolver(BundleTable.Bundles ).GetBundleContents("~/OnTheMoveWebFiles/bundles/Testing")即時窗口中我得到

Count = 23
    [0]: "~/OnTheMoveWebFiles/js/jquery-1.7.1.js"
    [1]: "~/OnTheMoveWebFiles/js/ua-parser.js"
    [2]: "~/OnTheMoveWebFiles/js/OnTheMove_Core.js"
    [3]: "~/OnTheMoveWebFiles/js/OnTheMove_TheApplication.js"
    [4]: "~/OnTheMoveWebFiles/js/OnTheMove_JQMQueryString.js"
    [5]: "~/OnTheMoveWebFiles/js/OnTheMove_OfflineAuditing.js"
    [6]: "~/OnTheMoveWebFiles/js/OnTheMove_DatabaseManager.js"
    [7]: "~/OnTheMoveWebFiles/js/OnTheMove.js"
    [8]: "~/OnTheMoveWebFiles/js/OnTheMove_Offline.js"
    [9]: "~/OnTheMoveWebFiles/js/OnTheMove_DatabaseLoader.js"
    [10]: "~/OnTheMoveWebFiles/js/OnTheMove_DatabaseTestHelper.js"
    [11]: "~/OnTheMoveWebFiles/js/OnTheMove_SmartScriptPlayer.js"
    [12]: "~/OnTheMoveWebFiles/js/jasmine.js"
    [13]: "~/OnTheMoveWebFiles/js/jasmine-html.js"
    [14]: "~/OnTheMoveWebFiles/js/jasmine-jquery-1.7.0.js"
    [15]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove-GenericMocksAndHelpers.js"
    [16]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove-DatabaseManager-SiebelToSQL-Tests.js"
    [17]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove-TreeValidator-Tests.js"
    [18]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove-GlobalFunction-Tests.js"
    [19]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove-OnTheMove_BusinessComponent-Tests.js"
    [20]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove_DatabaseTestHelper-Tests.js"
    [21]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove_OfflineAuditing-Tests.js"
    [22]: "~/OnTheMoveWebFiles/js/jasmine-OnTheMove-JQueryExtension-Tests.js"

這表明訂單正在保存,但是當我在運行中縮小它時( var contents =BundleManager.GetBundleContents("~/OnTheMoveWebFiles/bundles/Testing"); )我得到了

"function TheApplication(){return window.onTheMove.theApplication}function decodeQueryString(n,t,i,r){var f,u={},s,h,e,o;if(i||(i=function(){return}),...

這是OnTheMove_TheApplication.js開頭,而不是我期待的jquery-1.7.1.js 我看到的一個解決方案是將它拆分成更多的捆綁包並嘗試以這種方式處理它。
為什么minifier不保留秩序? 我的期望是錯的嗎?

我通過創建擴展來解決此問題:

public class AsIsBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

internal static class BundleExtensions
{
    public static Bundle ForceOrdered(this Bundle sb)
    {
        sb.Orderer = new AsIsBundleOrderer();
        return sb;
    }
}

然后,您可以注冊您的包

bundles.Add(new ScriptBundle("~/bundles/home")
            .Include("~/Scripts/leaflet-0.6.4.js")
            .Include("~/Scripts/oms.js")
            .Include("~/Scripts/home.js").ForceOrdered()

        );

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM