Question

我正致力于优化网站，其中一个最大的问题是资源请求太多。

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

例如，如果我的页面上有3个小部件，它们都有自己的JS和CSS，我可以将所有JS捆绑到一个文件中，将所有css捆绑到另一个文件中。这会将往返次数从6减少到2.但是，如果另一个页面仅使用这3个小部件中的一个，则产生的捆绑将会浪费。

我想要做的是将特定小部件的所有JS AND CSS捆绑到一个文件中。然后，浏览器必须解压缩并将其提供给页面。对此的逻辑扩展是创建一个包包，以便所有小部件的所有资源文件都下载到一个文件中。

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

有什么想法吗？

TL; DR

有没有人想出一种将CSS和JS文件打包成单个文件的方法，以减少到服务器的往返？

Answer 1

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

如果您担心HTTP请求，可以将CSS完全嵌入<head>内，也可以使用数据URI方案。数据URI方案的缺点是IE 8及更低版本的浏览器支持较少或没有支持。

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

页面本身
CSS样式表
JavaScript脚本

其他解决方案包括直接在<head>内添加CSS和JavaScript内容，或使用数据URI方案。

Answer 2

不确定但是一个黑客是创建一个html文件并在其中添加你的js和css并将该文件导入原始的html文件

类似这样的事情

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

你的图书馆看起来像这样

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

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

2 个答案: