ASP.NET MVC 靜態資源打包和壓縮問題小記

ASP.NET MVC 中有個 BundleConfig 用於靜態資源的打包和壓縮，我在使用的過程中遇到一些問題，現在做下總結，並給出具體的解決方案。

問題一：打包壓縮后的 JavaScript 和 CSS 中引用的文件 404 錯誤。

代碼如下：

// Styles.
bundles.Add(new StyleBundle("~/bundles/styles/site.css").Include("~/static/styles/site.css"));

// Scripts.
bundles.Add(new ScriptBundle("~/bundles/scripts/index.js").Include("~/static/scripts/index.js"));

分析原因：

仔細看其中一條錯誤信息，說找不到 /bundles/images/bgi.jpg，但是這個圖片實際在 /static/images 中。很明顯就能看出來：如果訪問路徑和真實路徑不一致，則 JavaScript 和 CSS 中的相對路徑全部會悲劇。

所以解決方案有以下兩種：

1. 訪問路徑保持不變，但不在 JavaScript 和 CSS 中使用相對路徑。
2. 訪問路徑和真實路徑保持一致。

第一種解決方案可行，但很難保證團隊內成員不在 JavaScript 和 CSS 中使用相對路徑，同時也增加團隊內成員的開發壓力，所以我采用的是第二種解決方案，但隨之而來的是第二個問題：

問題二：打包和壓縮失效。

代碼如下：

// Styles.
bundles.Add(new StyleBundle("~/static/styles/site.css").Include("~/static/styles/site.css"));

// Scripts.
bundles.Add(new ScriptBundle("~/static/scripts/index.js").Include("~/static/scripts/index.js"));

分析原因：

文件路徑一致，文件名稱也一致，打包和壓縮都失效。猜想可能是訪問到了真實的文件，將訪問路徑的文件名改了后又試了試，果然是這樣。所以解決方案很簡單：避免訪問地址和真實地址一致即可。

總結

1. 訪問路徑和真實路徑不一致，JavaScript 和 CSS 中的相對路徑全部會悲劇。
2. 訪問地址和真實地址一致，會直接訪問到真實的文件，從而導致打包和壓縮失效。

貼一下修改后的代碼：

// Styles.
bundles.Add(new StyleBundle("~/static/styles/site").Include("~/static/styles/site.css"));

// Scripts.
bundles.Add(new ScriptBundle("~/static/scripts/index").Include("~/static/scripts/index.js"));