[英]What are the benefits of keeping all stylings in CSS files when doing Javascript intensive work?
[英]What are the benefits of concatenating all Javascript files into one before sending it to client?
例如,如果您有
<body>
<script src="someLibrary.js"></script>
<script src="someLibrary2.js"></script>
<script src="someLibrary3.js"></script>
<script src="someLibrary4.js"></script>
<script src="myApp"></script>
</body>
除了 html 中的漂亮之外,还有什么好处是让所有这些都被一个正在运行的任务(Grunt/Gulp)连接和缩小,然后以以下形式发送给客户端
<body>
<script src="allTheJavascripts.js"></script>
</body>
将多个 JS 文件合并为一个文件有以下好处:
缩小 JS 文件使其下载和解析更小,从而提高下载性能。
如果您同时合并多个文件并缩小,缩小可能会更有效。 分别缩小多个小文件时,您无法缩小在不同文件之间共享的变量名称 - 它们必须保留其原始名称。 但是,如果你合并所有的 JS 文件然后缩小,你可以缩小在不同 JS 文件之间共享的所有符号(只要它们不被外部共享)。
显然,这里有一些限制,如果全世界都将他们的 JS 放到一个文件中,事情不会变得任意好转。 在决定将哪些内容打包到一个文件中时需要考虑的一些事项:
您不希望一大群页面解析和执行他们不会使用的大块代码。 这显然是一种权衡,因为如果代码被有效地缓存,那么它就不是下载问题,而只是运行时效率问题。 每次使用都必须决定如何绘制权衡线。
您可能不希望将定期修改的代码与几乎不会更改的代码打包在一起,因为如果大型组合 JS 总是在变化,这会降低浏览器缓存的效率。
在具有多个项目共享代码的团队环境中,考虑将事物打包成组合和缩小的块以适用于最大数量的共享代码的项目是非常重要的。 您通常希望针对更广泛的需求优化打包,而不仅仅是针对单个项目。
移动访问通常具有较小的缓存、较慢的 CPU 和较慢的连接,因此在打包内容时考虑访问最多的移动页面的需求也很重要。
组合和最小化的一些缺点:
直接调试最小化的站点可能非常困难,因为许多符号已经失去了有意义的名称。 我发现出于调试/故障排除的原因,通常需要有一种方法来提供站点的最小化版本(或至少一些文件)。
浏览器中的错误消息将引用组合/最小化的文件,而不是实际的源文件,因此可能更难以追踪导致已报告的给定浏览器错误的代码。
必须对合并和最小化的站点进行测试,以确保这些额外步骤不会导致任何问题。
许多浏览器限制了对特定域的并发 HTTP 请求数。 连接 JavaScript 文件可减少所需的 HTTP 请求数量,从而可以更快地下载文件。
CSS 文件也是如此。
另外,这种组合文件有时会经过一个缩小过程,产生语法上等效的文件,这些文件更小。
一个缺点是,如果任何组件文件发生更改,则必须使整个组合文件的缓存无效并重新加载组合文件。 对于大多数情况,这是一个非常小的缺点。
很简单:
如果您的页面肯定会全部使用它们,那么继续将它们作为一个加载。 但这是一个粗略的假设,通常会失败。 作为一般规则,单片代码库是不好的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.