我们可以将 CSS 和 JS 文件合并为一个文件吗？答案

【问题标题】：Can we combine CSS and JS file into one file?我们可以将 CSS 和 JS 文件合并为一个文件吗？
【发布时间】：2017-06-20 10:58:50
【问题描述】：

其实我想减少谷歌页面速度警告。因此，我将所有 css 外部文件合并到一个 css 文件中，并将所有 java 脚本外部文件合并到一个文件 java 脚本文件中。所以现在我有两个外部文件（两个请求），一个是 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/，但我不清楚。任何建议对我都非常有帮助。

【问题讨论】：

我想就是这样：缩小统一所有css，缩小统一所有JS。
缩小了所有的css和js。
您可以将代码直接写入 HTML 文件。根本没有额外的请求。
@Hanlet。好的。产生更快加载外部文件的请求的任何其他方式
@Rajesh。我想将 JAVASCRIPT 和 CSS 文件合并到一个文件中。不是所有的css文件都放在一个文件里，所有的js文件都放在一个文件里。

标签： javascript css httprequest externalinterface

【解决方案1】：

如果您在服务器端运行，只需通过某种包含/部分（例如 PHP 中的 inlcude($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>

【讨论】：

stackoverflow.com/questions/7129842/…

【解决方案2】：

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

【讨论】：

为什么要贬低他的写作！无法将 css 和 js 文件合并为一个（在 html 中执行，但那很糟糕）
为什么我的评论被删除了

【解决方案3】：

您可以创建一个 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>

【讨论】：

【解决方案4】：

你可以：

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

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

【讨论】：

感谢您的回答，如果您正在加载外部 css，那么它将不适用于所有浏览器，基本上是移动浏览器。我做过这件事。但我的外部 css 并非在所有浏览器中都有效。像 Android Webview 等等。