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"));
上一篇:OAuth2.0学习(1-3)OAuth2.0的参与者和流程


下一篇:Java中的自动类型转换