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