为什么单独供应商CSS＆amp;来自自定义CSS和JS的JS JS在工作流程中？

Question

我一直在努力确定似乎已成为分离供应商JS＆amp ;;的前端工作流程的标准做法背后的原因。来自自定义JS和CSS的CSS CSS。我不确定额外的HTTP请求的缺点是什么好处，只需要一个CSS＆amp; JS文件，而不是vendor.css，main.css＆amp; vendor.js，main.js。

任何人都可以对此有所了解吗？

Answer 1

供应商代码的更改频率通常低于应用程序的代码。因此，当您更新应用程序时，供应商代码可以保持不变并缓存在用户的浏览器中。

在供应商代码与应用程序代码捆绑在一起的情况下，用户每次更新应用程序时都必须下载所有供应商代码。

来自单独供应商捆绑包的额外HTTP请求可以通过用户在每次应用程序更新时下载更少的代码来减轻。

Answer 2

我可以想到两个原因。

1. 与您的代码分开托管供应商代码（例如Google Hosted Libraries）
2. 关注点分离：供应商代码可能很大，并且会根据您的自定义代码进行更新。将代码保存在单独的文件中可以避免将供应商代码放入源代码控制中，从而可以更轻松地导航代码，从而可以轻松升级到新的供应商代码，因为您确实知道供应商代码尚未调整。 / LI>

   特别是因为您使用grunt标记了问题，最终用户可能永远不会看到此更改，因为您可以在构建期间合并供应商和用户样式/脚本。

   但是，如果供应商代码很大并且不经常更改，那么您可以通过拥有一个很少变化的大型供应商文件以及一个小的，快速变化的自定义代码文件来获得缓存优势。对于不使用CDN（希望不是您的CDN）的大型网站，影响可能会很明显。

Answer 3

根据您的具体情况，您可以在级联中降低编辑次数，这样您就可以覆盖供应商的样式和行为而不会泄露他们的代码。这很有用，因此您可以始终拥有可以恢复的工作版本（供应商代码）。在使用Wordpress的情况下，开发子主题可以更新父主题，而不会泄露您的自定义。

Answer 4

各种答案已经解决了这个问题，但我会非常具体：

1. 供应商代码可能会比您的代码更频繁或更不频繁地更改。如果 供应商代码更频繁地更改，例如对于错误修复，你会的 想要使用更新的版本并拥有更好的整体网站。 如果供应商代码比您的代码更频繁地更改，您可能希望如此 改变你的代码而不接触工作的东西。

2. 供应商代码通常托管在CDN上，例如https://cdnjs.com/#q=ajax或 https://developers.google.com/speed/libraries/这些都很快 加载。它们也不会改变，因此用户可以依赖缓存 文件，因此您的网站将加载更快。

3. 通常最好对代码进行迭代更改。管理代码也更容易，特别是在源代码控制时 事情正在改变。没有时，无需交换大文件 改变。将事物分开使其更容易制作 增量变化，尤其是两件事情有不同的变化 的速度。