将 JS 和 CSS 合并到一个文件中

Posted 2023-02-22

【中文标题】将 JS 和 CSS 合并到一个文件中

【英文标题】：Combine JS and CSS to one file

【发布时间】：2017-10-10 23:39:52

【问题描述】：

我有一个 sample.min.js 和 sample.min.css 文件。我只想要一个包含所有 JS 和 CSS 内容的文件 sample.min.js。我正在使用 grunt，我不确定是否有插件可以做到这一点。

任何帮助或建议都会很棒。

【问题讨论】：

坏主意，它们是 2 种不同的语言，并且被分别调用。一个通过<link>，另一个通过<script>。如果你想减少 http 请求，你可以将你的 css 直接放到页面的 <style> 块中

你为什么要这样做？两个文件已经很不错了。

大声笑，也许在你的 js 文件中将 css 作为字符串，然后动态创建一个

@DmitryNarkevich 有趣的想法。不过我还是会说这是不好的做法。

您可以在开发文件中将 css 和 js 组合在一起，并使用 grunt 将它们编译成浏览器可以读取的单独的 .css 和 .js 文件——例如 vue 组件会这样做——但是你不能以相反的方式合理地做到这一点。

【参考方案1】：

您可以创建一个 html 文件并将所有 JS 放在 <script> 标记中，并将所有 CSS 放在 <style> 标记中。但这将是一个非常愚蠢的想法，并且会使可读性几乎不可能。

【参考方案2】：

我建议不要这样做。虽然您可以将您的 CSS 转换为等效的 javascript，但它会比原生 CSS 慢得多。

您必须拥有 2 个文件这一事实没关系，但只要您将所有 CSS 合并到一个文件中并将所有 JS 合并到另一个文件中，当它出现时，您仍然在做正确的事情加载优化。

此外，将这 2 个文件合并为一个实际上会损害性能。这是因为浏览器一次可以同时下载多个文件。但是，如果将它们合并到一个文件中，浏览器就没有机会利用这一点。