为什么要在工作流程中将供应商 CSS 和 JS 与自定义 CSS 和 JS 分开？答案

【问题标题】：Why separate vendor CSS & JS from custom CSS & JS in a workflow?为什么要在工作流程中将供应商 CSS 和 JS 与自定义 CSS 和 JS 分开？
【发布时间】：2015-09-02 23:33:19
【问题描述】：

我一直在尝试确定将供应商 JS 和 CSS 与自定义 JS 和 CSS 分离的前端工作流程中似乎已成为标准做法的原因。我不确定额外 HTTP 请求的缺点有什么好处，只拥有一个 CSS 和 JS 文件而不是拥有 vendor.css、main.css 和 vendor.js、main.js 似乎更干净。

有人能解释一下吗？

【问题讨论】：

我认为这会很有趣。也许有一个新的文件类型，比如 .jcross 或 jcss。

标签： gruntjs gulp bower frontend yeoman

【解决方案1】：

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

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

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

【讨论】：

谢谢你的回答，我认为 Sunil 的解释是正确的，因为他的解释对我来说是最清楚的

【解决方案2】：

我能想到两个原因。

将供应商代码与您的代码分开托管（例如Google Hosted Libraries）
关注点分离：供应商代码可能很大，并且独立于您的自定义代码进行更新。将代码保存在单独的文件中可以避免将供应商代码放入源代码控制中，使您的代码更容易导航，更容易升级到新的供应商代码，因为您肯定知道供应商代码没有经过调整。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

我在 Wordpress 方面考虑的较少，而在前端生成器方面考虑更多，例如 Yeoman，因为 Gulp/Grunt 插件倾向于分离 JS 和 CSS。在覆盖方面，您可以在供应商 CSS/JS 之后将自定义 JS/CSS 组合起来，就像您将嵌入 HTML 中一样

【解决方案4】：

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

供应商代码的更改频率可能比您的代码多或少。如果供应商代码更改更频繁，例如对于错误修复，你会想要使用较新的版本并拥有更好的整体网站。如果供应商代码的更改频率低于您的代码，您可能希望改变你的代码而不涉及工作的东西。
供应商代码通常托管在 CDN 上，例如 https://cdnjs.com/#q=ajax 或 https://developers.google.com/speed/libraries/ 这些很快加载。他们也不会改变，所以用户可以依赖缓存文件，因此您的网站将加载得更快。
对代码进行迭代更改通常会更好。管理代码也更容易，尤其是在特定时使用源代码控制事情正在发生变化。没有大文件时不需要交换大文件改变了。将事物分开使制作更容易增量变化，特别是如果两件事有不同的变化速度。

【讨论】：