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