Gruntjs 为什么要分开供应商CSS&；来自定制CSS的JS&；工作流中的JS？

我一直在试图确定将供应商JS&CSS与定制JS&CSS分离的前端工作流中的标准做法背后的原因。我不确定额外HTTP请求的优点和缺点是什么，只使用一个CSS&JS文件似乎比使用vendor.CSS、main.CSS&vendor.JS、main.JS更干净

---

有人能解释一下吗？

根据您的情况，这允许您在级联中进行较低的编辑，这样您就可以覆盖供应商的样式和行为，而无需删除它们的代码。这是很有帮助的，这样您就可以始终拥有可以还原到的工作版本（供应商代码）。在使用Wordpress等情况下，开发子主题可以在不破坏自定义设置的情况下更新父主题。

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

在供应商代码与应用程序代码绑定的场景中，用户必须在每次更新应用程序时下载所有供应商代码

---

由于用户在每次应用程序更新时会下载更少的代码，因此来自独立供应商捆绑包的额外HTTP请求得到了缓解。

我可以想到两个原因

将供应商代码与您的代码分开托管（例如）

关注点分离：供应商代码可能很大，并且独立于自定义代码进行更新。将代码保存在一个单独的文件中，可以避免将供应商代码放入源代码管理中，使代码更易于导航，使升级到新的供应商代码变得更容易，因为您肯定知道供应商代码尚未调整

特别是由于您使用

grunt

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

---

但是，如果供应商代码很大且不经常更改，那么使用很少更改的大型供应商文件和快速更改的小型自定义代码文件，确实可以获得缓存好处。对于不使用CDN（希望不是您的CDN）的大型网站，其影响是显而易见的。

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

供应商代码的更改频率可能高于或低于您的代码。如果 更频繁地更改供应商代码，例如，对于错误修复，您将 希望使用更新的版本，并有一个更好的整体网站。 如果供应商代码的更改频率低于您的代码，您可能希望 在不接触工作材料的情况下更改代码

供应商代码通常托管在CDN上，例如 这些很快 加载。它们也不会改变，因此用户可以依赖缓存 文件，因此您的网站将加载更快

通常最好对代码进行迭代更改。管理代码也更容易，特别是在特定的情况下使用源代码管理 情况正在改变。不需要交换大文件（如果没有） 改变。把事情分开做会更容易 增量变化（尤指两件事发生不同变化时） 速度

---

我想那会很有趣。可能会有一个新的文件类型，比如.jcross或jcss。我不太考虑Wordpress，而更多地考虑前端生成器，例如Yeoman，因为Gulp/Grunt插件倾向于将JS和CSS分开。在覆盖你将结合你的自定义JS/CSS后，供应商的CSS/JS，因为你将嵌入你的HTMLTank you for your答案，我认为Sunil的解释是正确的，因为他的解释对我来说是最清楚的