我们能把CSS和JS文件合并成一个文件吗？

Question

我们能把CSS和JS文件合并成一个文件吗？

4

实际上我想要减少谷歌页面速度警告。因此，我已经将所有的CSS外部文件合并为一个CSS文件，将所有的JavaScript外部文件合并为一个JavaScript文件。所以现在我有两个外部文件（两个请求），一个是CSS，第二个是JavaScript。我们可以将这两个文件合并为一个文件吗？或者两个请求可以看作是一个请求吗？如果有任何方法可以将这两个文件作为一个请求，请告诉我。

 <link   rel="stylesheet" href="../css/eagle/main.min.css" type="text/css">
 <script defer  src="../js/eagle/init.min.js"></script>

我看到了这个链接https://www.keycdn.com/support/combine-external-javascript-and-css/，但是我不太清楚。有什么建议可以帮助我吗？

- Varun Sharma

我想这就是了：压缩和统一所有的CSS，以及压缩和统一所有的JS。 - Hanlet Escaño

您可以直接将代码编写到HTML文件中，无需任何额外的请求。 - Justinas

@Hanlet。好的。还有其他方法可以请求更快地加载外部文件吗？ - Varun Sharma

同时，您也可以通过使用 <script> 的 async 和 defer 属性来减少开销：https://dev59.com/NWgv5IYBdhLWcg3wKtlB - Brad Allred

@Brad Allred。我想将CSS和JS文件合并成一个文件。因为延迟加载或异步加载对于多个外部文件非常有用。 - Varun Sharma

显示剩余6条评论

4个回答

1

你可以创建一个html文件(假设为: combined.html)，并使用脚本和样式页将所有html和css放入其中。在应用程序中加载combined.html文件。这取决于您使用哪种技术将html加载到另一个html中。在jQuery中，以下代码将有所帮助。

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
        $("#includedContent").load("combined.html"); 
      });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

- Savan S

0

如果您正在运行服务器端，可以通过某种包含/局部文件的方式来实现（例如，在PHP中使用include($file)函数）。但是，请注意，您正在放弃缓存外部文件的好处。

示例：

index.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <?php include("css_js.inc");?>
    </head>
    <body></body>
</html>

css_js.inc

<style>
*, ::before, ::after {
    box-sizing:border-box;
    position:relative;
    }
</style>

<script>
window.ga = function () {ga.q.push(arguments)};
ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

- Pavel Říha

https://dev59.com/XWw05IYBdhLWcg3wnjLC - A. Meshu

-3

不，你不能将js和css合并成一个文件。也许这可以帮助提高网站的速度。

我应该把

- Goran Jorgić

1

为什么他要点踩呢！不能将CSS和JS文件合并成一个文件（除非在HTML中，但那很糟糕）。 - AlainIb

为什么我的评论被删除了？ - Andrew

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stdob-- · Accepted Answer

你可以：

var style = document.createElement('style');
style.innerHTML = cssString;
document.body.appendChild(style);

但我认为这两个请求并不是问题。有趣的节省。