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 中的相对路径全部会悲剧。

所以解决方案有以下两种：

访问路径保持不变，但不在 javascript 和 css 中使用相对路径。访问路径和真实路径保持一致。

第一种解决方案可行，但很难保证团队内成员不在 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"));

分析原因：

文件路径一致，文件名称也一致，打包和压缩都失效。猜想可能是访问到了真实的文件，将访问路径的文件名改了后又试了试，果然是这样。所以解决方案很简单：避免访问地址和真实地址一致即可。

总结 访问路径和真实路径不一致，javascript 和 css 中的相对路径全部会悲剧。 访问地址和真实地址一致，会直接访问到真实的文件，从而导致打包和压缩失效。

贴一下修改后的代码：

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