我们可以将 CSS 和 JS 文件合并为一个文件吗？
Posted
技术标签:
【中文标题】我们可以将 CSS 和 JS 文件合并为一个文件吗？【英文标题】：Can we combine CSS and JS file into one file? 【发布时间】：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文件都放在一个文件里。 【参考方案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>
【讨论】：
***.com/questions/7129842/…【参考方案2】：不，您不能将 js 和 css 合并到一个文件中。也许这可以帮助提高网站的速度。
Where should I put <script> tags in HTML markup? how to set cache for css/js file【讨论】：
为什么要贬低他的写作！无法将 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 等等。以上是关于我们可以将 CSS 和 JS 文件合并为一个文件吗？的主要内容，如果未能解决你的问题，请参考以下文章
将主题中的 CSS 和 JS 文件合并到 Angular8 项目中的完美正确方法是啥