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"));