Fatal编程技术网
  • javascript/
  • Javascript 在一个文件（包）中下载css和js

Javascript 在一个文件（包）中下载css和js

javascript css html

Javascript 在一个文件（包）中下载css和js,javascript,css,html,Javascript,Css,Html,我正在优化一个网站，它最大的问题之一是有太多的资源请求 JavaScript和CSS捆绑和缩小在很大程度上改善了这一点，但它们与透明命名有些不一致 例如，如果我的页面上有3个小部件，它们都有自己的JS和CSS，我可以将所有的JS绑定到一个文件中，将所有的CSS绑定到另一个文件中。这将使往返次数从6次减少到2次。但是，如果另一个页面只使用这3个小部件中的一个，那么生成的包将是浪费 我想做的是将特定小部件的所有JS和CSS捆绑到一个文件中。然后浏览器必须将其解包并使其可用于页面。对此的逻辑扩展是创建

我正在优化一个网站，它最大的问题之一是有太多的资源请求

JavaScript和CSS捆绑和缩小在很大程度上改善了这一点，但它们与透明命名有些不一致

例如，如果我的页面上有3个小部件，它们都有自己的JS和CSS，我可以将所有的JS绑定到一个文件中，将所有的CSS绑定到另一个文件中。这将使往返次数从6次减少到2次。但是，如果另一个页面只使用这3个小部件中的一个，那么生成的包将是浪费

我想做的是将特定小部件的所有JS和CSS捆绑到一个文件中。然后浏览器必须将其解包并使其可用于页面。对此的逻辑扩展是创建一个包包包，以便将所有小部件的所有资源文件下载到单个文件中

我能想到的唯一方法是使用web服务，然后使用JavaScript将输出直接写入文档。这感觉不对，因为我认为浏览器不会适当地缓存这一点

有什么想法吗

TL；DR

有没有人想出办法将CSS和JS文件打包到一个文件中，以减少到服务器的往返行程？

因为，将两者打包到一个文件中并发送到客户端不是一个好主意。CSS不能添加JavaScript，但可以使用JavaScript将CSS包含到正文中。因此，唯一的方法是将CSS作为单个字符串变量添加，并生成
document.createElement
，然后将其附加到
头中

如果您关心HTTP请求，可以将CSS完全嵌入
中，也可以使用数据URI方案。数据URI方案的缺点是，IE 8及以下浏览器支持较少或没有支持

解决方案：这是必须的，最好至少包含三个请求，用于：


    

  • 页面本身
    • 

  • CSS样式表
    • 

  • JavaScript脚本
    • 


其他解决方案包括直接在
中添加CSS和JavaScript内容，或使用数据URI方案。
因为，将两者打包在一个文件中并发送给客户端不是一个好主意。CSS不能添加JavaScript，但可以使用JavaScript将CSS包含到正文中。因此，唯一的方法是将CSS作为单个字符串变量添加，并生成
document.createElement
，然后将其附加到
头中

如果您关心HTTP请求，可以将CSS完全嵌入
中，也可以使用数据URI方案。数据URI方案的缺点是，IE 8及以下浏览器支持较少或没有支持

解决方案：这是必须的，最好至少包含三个请求，用于：


    

  • 页面本身
    • 

  • CSS样式表
    • 

  • JavaScript脚本
    • 



其他解决方案包括直接在
中添加CSS和JavaScript内容，或使用数据URI方案。
不确定，但有一种方法是创建一个html文件，并在其中添加js和CSS，然后将该文件导入原始html文件

像这样的


<head>
   <link rel="import" href="library.html">
</head>



<html><script>YOUR JS code</script><style>YOUR STYLES</style></html>






你的图书馆看起来像这样


<head>
   <link rel="import" href="library.html">
</head>



<html><script>YOUR JS code</script><style>YOUR STYLES</style></html>



你的JS代码你的风格

不确定，但有一种方法是创建一个html文件，并在其中添加js和css，然后将该文件导入原始html文件中

像这样的


<head>
   <link rel="import" href="library.html">
</head>



<html><script>YOUR JS code</script><style>YOUR STYLES</style></html>






你的图书馆看起来像这样


<head>
   <link rel="import" href="library.html">
</head>



<html><script>YOUR JS code</script><style>YOUR STYLES</style></html>



你的JS代码你的风格

简而言之：我不这么认为。从技术上讲，您可以将CSS存储为JS变量，然后创建一个
样式
元素，并将字符串添加为其
内容
，从技术上讲，这会将两者打包到一个文件中，缺点是如果没有JS，就没有CSS。不过，将所有内容“打包”到一个文件中的最好、正式的方法是将它们都作为内联脚本和样式包含在内。我不确定这是否对您有帮助，但当我创建网站时，我会使用PHP if/else语句按主体类加载特定的JS/CSS文件。例如，添加一个“slider”的主体类来加载滑块JS和CSS。使用gulp或任何构建系统。简而言之，我不这么认为。从技术上讲，您可以将CSS存储为JS变量，然后创建一个
样式
元素，并将字符串添加为其
内容
，从技术上讲，这会将两者打包到一个文件中，缺点是如果没有JS，就没有CSS。不过，将所有内容“打包”到一个文件中的最好、正式的方法是将它们都作为内联脚本和样式包含在内。我不确定这是否对您有帮助，但当我创建网站时，我会使用PHP if/else语句按主体类加载特定的JS/CSS文件。例如，添加一个“slider”的主体类来加载滑块JS和CSS。使用gulp或任何构建系统。阅读此内容-此
import
语句是否与简单地使用
标记不一样，并且还会引发对服务器的请求？如果文件是独立的，那么无论您如何请求，请求都是独立的。它也只是一个工作草案，Firefox没有支持，Chrome需要启用一个标志，所以现在这不是一个可行的解决方案，如果它首先解决了问题的话。链接导入的想法听起来正是我想要的。它允许浏览器区分各个资源，同时仍然只需要一次往返检索（如果我理解正确的话）。缺点是它没有得到足够的支持。幸运的是，我们不支持较旧的浏览器，但FF IE或Safari还不支持导入。浏览器支持什么？我认为它支持所有浏览器，但不支持IE:）这个
import
语句是否与简单地使用
标记不一样，并且还会引发请求