问题标签 [web-optimization]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 编写超大级联样式表 (CSS) 文件的最佳方法是什么
我们的网站有一些非常复杂的样式,我们希望确保 CSS 不会变得难以管理。
在生产环境中,我们的理想似乎是通过公共 CDN 服务器提供尽可能少的外部 CSS 文件(理想情况下是 1 个?) ,并且可能是最小化版本。
在开发中,我们的理想似乎是多个 CSS 文件;每个 CSS 文件将只包含特定概念的样式,例如选项卡或日期时间选择器(只是组成这些,但你明白了)。拥有多个文件可以让开发人员/设计人员快速找到感兴趣的 CSS 类,并且我们也减少了文件争用问题,因为每个人都在更新单独的文件。
我很想保留单个文件以用于开发目的,但有一个外部应用程序可以连接/缩小用于生产的 CSS 文件。但是,我确信这不是第一个面临这些问题的网站,所以我很想听听其他人是如何解决这个问题的。
.net - 部署新的 CSS 或 JavaScript 文件后,如何确保客户端浏览器缓存已刷新?
我正在使用Microsoft ASP.NET Web Optimization Framework
您可能知道,它可以将所有 JS/CSS 连接到单个文件中。您可以在配置中定义输出文件名,并确保用户浏览器将获取更新的 JS/CSS,它添加了类似的参数v=yUVjELgc9foFnhZgsvMfx2DhVRLKWK-w69IoCVhJ_aM1
链接看起来像:
我听说并非所有浏览器都支持该参数并且不刷新缓存。
我可以确定所有浏览器都会使用这种方法更新缓存还是我必须手动生成新文件名?是否有任何表格,我可以在其中看到不支持的浏览器?
谢谢
asp.net - microsoft web 优化框架是否支持 css @import?
在BundleConfig
我定义 css 文件列表中。如果这些文件中的任何一个具有@import 规则(@import url('/css/typography.css');
),那么该框架是否也会最小化目标 css 文件?
谢谢
javascript - ASP.NET MVC4 捆绑脚本在子文件夹中找不到脚本 - 为什么?
在我的 ASP.NET MVC4 应用程序的 RegisterBundles 方法中,我创建了以下脚本包:
因此,“whatever1.js”直接位于 Scripts 文件夹下,而“whatever2.js”位于 Scripts 下的子文件夹中。
当我运行我的代码(在调试中)时,这会加载“whatever1.js”脚本文件,而不是子文件夹中的那个。
这是一个很大的站点,为了理智起见,到目前为止,将脚本文件隔离在单独的文件夹下已被证明是有用的。
所以问题是:这对我来说是不好的做法,还是捆绑机制还没有(或者我只是弄乱了语法)?
提前致谢
格里夫
asp.net-mvc-4 - 带有绝对路径的 ASP.NET MVC 包
我在 IIS 上有一个虚拟目录,其中包含所有 javascript 和 css 文件。是否可以使用 Bundle 将这些文件包含到 ASP.NET MVC 应用程序中。
我已经尝试过这样的事情:
但出现错误:
仅允许应用程序相对 URL (~/url)。:
/public/javascript 是 IIS 上的虚拟目录。
jquery - 发起者 jquery.min.js - 404 Not Found on ajax-loader.gif 和 black.png
我开始优化我一直在努力提高速度的网站,使用缩小的 JS、没有注释的 CSS 等。
我正在使用 chromes 开发人员工具 - 网络选项卡 - 来估计加载时间并发现任何错误。在这里,我注意到两个图像文件的两个 404 未找到错误:ajax-loader.gif 和 black.png。
在谷歌快速搜索后,我发现了一个“ajax-loader.gif”生成器,其中包含不同版本的标准风车装载机。我已经生成了一个并将其包含在我的文件中,它现在加载得很好。但是什么初始化了这个 gif?我的 jquery 加载都没有那么慢以至于需要它。那么这个图像实际上是如何被加载的,或者更确切地说它是什么时候出现的呢?jquery 会自己启动它吗?
此外,我还有 black.png。我找不到关于这个文件的任何相关材料,很明显 jaquery.min.js 正在启动它。我正在使用 google 的 api 链接到 jquery 库。black.png 有什么作用?
这是一个屏幕截图...
你也可以在那里看到 ajaxloader.gif,在我生成并上传之后现在可以工作了。在我这样做之前,它 404 就像 black.png 显然是因为它不存在,并且花费了类似的 220 毫秒延迟,现在因为它可以找到文件而减少了。
总而言之,它们的作用是什么,它们何时出现,以及 black.png 实际上是什么?
asp.net-mvc-4 - 具有附加属性的 ScriptBundle
并在 _Layout.cshtml
它呈现为(带EnableOptimizations = false
):
但我想添加一个属性
我怎么能那样做?
asp.net - 即使在调试模式下,在 WebForms 中使用包也会输出缩小/组合的文件
我创建了一堆我想组合/缩小在一起的各种脚本文件。在我的文件后面的代码中(是的,对不起,它在 VB 中!)我将它添加到<asp:placeholder />
这样<head>
的
这会起作用,但它似乎总是输出压缩的缩小版本,即使debug="true"
在 Web.Config 中也是如此。
无论如何,这就是输出:<script src="/bundles/main"></script>
在调试模式下,我需要做些什么来使这个输出成为单独的未压缩文件?
编辑
我还尝试手动设置该选项BundleTable.EnableOptimizations = false
,它仍然输出单个缩小的脚本标签。我没主意了。
最终编辑
我用一些相关的代码做了一些非常愚蠢的事情,但从技术上讲,捆绑包的一切都很好并且工作正常。问题为我解决了!
asp.net-mvc-4 - 使用 ASP.NET Web 优化和 BundleTransformer 更正 CSS 捆绑中的路径时,IItemTransform 的正确用途是什么?
我目前正在开发一个项目,该项目使用ASP.NET Web 优化库(v 1.1.0-Beta1)和Bundle Transformer扩展(v 1.7.3-Beta1 用于核心,1.7.0-Beta1 用于 LESS)用于将 LESS 转换为 CSS。基于 CSS(和更少)内的网络搜索路径似乎是一个常见问题,在大多数情况下,建议手动修改 CSS 并完成它。但是,由于我们的开发和生产环境之间存在差异,并且不拥有受影响的 CSS,这样的解决方案是不可行的。
似乎存在两种解决方案。第一种是将捆绑定义的虚拟目录覆盖在包含内容的实际目录上。对我来说,这似乎是一个糟糕的选择。
其次,我选择的路线是使用IItemTransform
诸如(在这篇文章CssRewriteUrlTransform
中提到。即使这个解决方案也有它的局限性。因此我试图编写自己的,但似乎它的执行结果被忽略了当以下列方式使用时:ItemTransformer
IItemTransform 的实现:
除非我完全误解了如何使用 an IItemTransform
,这很可能由于缺乏文档,我认为 Process 方法的返回是新的后处理 CSS。然而,回报似乎被忽略了。原始输入始终在使用中,即使我返回一个String.Empty()
. 我在这里做错了什么还是确实是一个错误?
asp.net-mvc-4 - 在 ASP.NET MVC4 应用程序的 BundleConfig.cs 中引用其他包
我正在开发一个 MVC4 应用程序,我在其中使用 WebOptimization 来完成我的所有资源处理(cat 和 min)。我有几页非常相似,但需要逐页使用一些不同的样式。
所以,我试图在另一个包(页面特定样式)中引用一个包(基本样式),但我运气不佳。这是我的捆绑配置中的内容:
在搜索树页面上,我得到了 trees.css,但基本搜索 CSS 包中没有任何内容。
如何在第二个包中引用第一个包?我敢肯定有一种方法,只是对捆绑还不太熟悉。