logo标签列表

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

gruntjsgulpbowerfrontendyeoman
7
我一直在试图确定前端工作流程中将供应商JS和CSS与自定义JS和CSS分离的标准做法背后的原因。我不确定相比于额外的HTTP请求，这种方法的好处是什么，似乎只有一个单独的CSS和JS文件而不是有vendor.css、main.css和vendor.js、main.js更加干净整洁。
有人能解释一下吗？
我认为这会很有趣。也许可以有一个新的文件类型，比如 .jcross 或 jcss。 - RetroCoder
4个回答
8

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

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

单独的供应商包的额外HTTP请求可通过以下事实来缓解：用户将在每次应用程序更新时下载更少的代码。

谢谢你的回答，我认为Sunil的回答是正确的，因为他的解释对我来说最清晰。 - sjm
3
我可以想到两个原因。
  1. 将托管供应商代码与您的代码分开（例如Google Hosted Libraries）
  2. 责任分离：供应商代码可能很大，并且独立于自定义代码进行更新。在单独的文件中维护您的代码避免了需要将供应商代码放入源代码控制中，使得更容易浏览您的代码，也使得升级到新的供应商代码变得容易，因为您可以确定供应商代码没有被修改。
特别是因为您使用了grunt标签，最终用户可能永远不会看到这种变化，因为您可以在构建期间合并供应商和用户样式/脚本。
但是，如果供应商代码很大且更改不频繁，则确实可以从具有很少更改的大型供应商文件和小型、快速更改的自定义代码文件中获得缓存优势。对于不使用CDN的大型网站（希望不是您的网站），影响可能会明显。
1

已经有很多回答涉及到这个问题，但我会让它更具体：

  1. 供应商代码可能比你的代码更频繁地进行更改。 如果供应商代码更频繁地更改，例如进行错误修复，您将希望使用更新版本并拥有更好的整体网站体验。 如果供应商代码变化的不频繁而您的代码频繁变化，则可能希望在不影响运行的情况下更改您的代码。

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

  3. 通常最好对代码进行迭代式更改。 特别是在源代码控制时，管理代码也更容易。 当特定事物发生变化时，无需交换大型文件。 保持事物分开使得更容易进行增量更改，特别是如果两个事物的变化速度不同。

1
根据您的情况，这使您能够在级联中进行较低层次的编辑，从而可以覆盖供应商的样式和行为，而不会破坏它们的代码。这是有帮助的，这样您总是可以返回到工作版本（供应商代码）。在像 WordPress 这样的情况下，开发子主题允许更新父主题而不破坏您的自定义内容。
我在思考的不是WordPress，而是前端生成器，例如Yeoman，因为Gulp/Grunt插件倾向于将JS和CSS分离。关于覆盖，您可以在供应商CSS/JS之后组合自定义JS/CSS，就像在HTML中嵌入一样。 - sjm
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接