为什么在工作流程中将供应商 CSS & JS 与自定义 CSS & JS 分开?
Why separate vendor CSS & JS from custom CSS & JS in a workflow?
我一直在尝试确定将供应商 JS 和 CSS 与自定义 JS 和 CSS 分开的前端工作流程中似乎已成为标准做法的原因。我不确定额外 HTTP 请求的缺点有什么好处,只有一个 CSS & JS 文件而不是 vendor.css、main.css & 似乎更干净vendor.js, main.js.
任何人都可以阐明这一点吗?
根据您的情况,这允许您在级联中进行较低的编辑,这样您就可以覆盖供应商的样式和行为,而不会破坏他们的代码。这很有帮助,因此您始终拥有可以恢复到的工作版本(供应商代码)。在使用 Wordpress 等情况下,开发子主题允许更新父主题,而不会破坏您的自定义设置。
供应商代码的更改频率通常低于应用程序的代码。因此,当您更新应用程序时,供应商代码可以保持不变并缓存在用户的浏览器中。
在供应商代码与应用程序代码捆绑的场景下,用户每次更新应用程序时都必须下载所有供应商代码。
来自单独供应商包的额外 HTTP 请求因用户将在每次应用程序更新时下载较少的代码而得到缓解。
我可以想到两个原因。
- 将供应商代码与您的代码分开托管(例如 Google Hosted Libraries)
- 关注点分离:供应商代码可能很大,并且独立于您的自定义代码进行更新。在单独的文件中维护您的代码避免了将供应商代码放入源代码控制的需要,使您更容易浏览代码,更容易升级到新的供应商代码,因为您确定供应商代码没有被调整。
特别是因为您用 grunt
标记了问题,最终用户可能永远不会看到此更改,因为您可以在构建期间合并供应商和用户 styles/scripts。
但是,如果供应商代码很大且更改不频繁,您确实可以从很少更改的大型供应商文件中获得缓存优势,同时使用小型快速更改的自定义代码文件。对于不使用 CDN 的大型网站(希望不是您的网站),影响会很明显。
各种答案已经解决了这个问题,但我会非常具体:
供应商代码的更改频率可能比您的代码高或低。如果
供应商代码更改更频繁,例如对于错误修复,你会
想要使用较新的版本并拥有更好的整体网站。
如果供应商代码的更改频率低于您的代码,您可能希望
更改您的代码 w/o 触摸工作内容。
供应商代码通常托管在 CDN 上,例如 https://cdnjs.com/#q=ajax 或
https://developers.google.com/speed/libraries/ 这些很快
加载。它们也不会改变,所以用户可以依赖缓存
文件,因此您的网站将加载得更快。
通常最好对代码进行迭代更改。管理代码也更容易,尤其是在特定情况下使用源代码控制
事情正在改变。不需要交换大文件
变了。将事物分开可以使制作更容易
增量变化,特别是如果两件事有不同的变化
速度。
我一直在尝试确定将供应商 JS 和 CSS 与自定义 JS 和 CSS 分开的前端工作流程中似乎已成为标准做法的原因。我不确定额外 HTTP 请求的缺点有什么好处,只有一个 CSS & JS 文件而不是 vendor.css、main.css & 似乎更干净vendor.js, main.js.
任何人都可以阐明这一点吗?
根据您的情况,这允许您在级联中进行较低的编辑,这样您就可以覆盖供应商的样式和行为,而不会破坏他们的代码。这很有帮助,因此您始终拥有可以恢复到的工作版本(供应商代码)。在使用 Wordpress 等情况下,开发子主题允许更新父主题,而不会破坏您的自定义设置。
供应商代码的更改频率通常低于应用程序的代码。因此,当您更新应用程序时,供应商代码可以保持不变并缓存在用户的浏览器中。
在供应商代码与应用程序代码捆绑的场景下,用户每次更新应用程序时都必须下载所有供应商代码。
来自单独供应商包的额外 HTTP 请求因用户将在每次应用程序更新时下载较少的代码而得到缓解。
我可以想到两个原因。
- 将供应商代码与您的代码分开托管(例如 Google Hosted Libraries)
- 关注点分离:供应商代码可能很大,并且独立于您的自定义代码进行更新。在单独的文件中维护您的代码避免了将供应商代码放入源代码控制的需要,使您更容易浏览代码,更容易升级到新的供应商代码,因为您确定供应商代码没有被调整。
特别是因为您用 grunt
标记了问题,最终用户可能永远不会看到此更改,因为您可以在构建期间合并供应商和用户 styles/scripts。
但是,如果供应商代码很大且更改不频繁,您确实可以从很少更改的大型供应商文件中获得缓存优势,同时使用小型快速更改的自定义代码文件。对于不使用 CDN 的大型网站(希望不是您的网站),影响会很明显。
各种答案已经解决了这个问题,但我会非常具体:
供应商代码的更改频率可能比您的代码高或低。如果 供应商代码更改更频繁,例如对于错误修复,你会 想要使用较新的版本并拥有更好的整体网站。 如果供应商代码的更改频率低于您的代码,您可能希望 更改您的代码 w/o 触摸工作内容。
供应商代码通常托管在 CDN 上,例如 https://cdnjs.com/#q=ajax 或 https://developers.google.com/speed/libraries/ 这些很快 加载。它们也不会改变,所以用户可以依赖缓存 文件,因此您的网站将加载得更快。
通常最好对代码进行迭代更改。管理代码也更容易,尤其是在特定情况下使用源代码控制 事情正在改变。不需要交换大文件 变了。将事物分开可以使制作更容易 增量变化,特别是如果两件事有不同的变化 速度。