0

我总是远程开发，我通常会得到一个很大的 main.css 和 main.js 文件。他的计划越大，事情就越混乱。所以我一直想拆分 .css 和 .js 文件以增加模块化。但是我不想在加载所有这些不同的文件时有大量的 http 请求。考虑到我的远程开发工作流程，像 Codekit 这样的优秀软件对我来说并不适用。

所以我想出了这个基本设置：

<html>
<head>
    <style>
        <?php
        $css = file_get_contents('css/a.css').
               file_get_contents('css/b.css').
               file_get_contents('css/c.css');
        $css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css); // remove comments          
        $css = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css); // remove tabs, spaces, newlines, etc.
        echo $css;
        ?>  
    </style>
</head>
<body>

    <p>Hello.</body>

    <script>
        <?php
        $js = file_get_contents('js/a.js').
              file_get_contents('js/b.js').
              file_get_contents('js/c.js');
        echo $js;
        ?>  
    </script>

</body>
</html>

我喜欢这种方法的地方在于文件的模块化、单个 http 请求（仅 html 文件本身）以及一切都自动发生且不会干扰工作流程的事实。

对此你们怎么看？

4

1 回答 1

0

将大型 JS 和 CSS 文件拆分为多个文件是一种很好的开发实践。话虽如此，以下是您的解决方案的一些优点和缺点，可以即时组合它们。您可能已经想到了这些问题……但无论如何，它们都在这里：

优点：

  • 客户端发出一个请求。

缺点：

  • 额外的服务器处理。
  • 您无法从浏览器缓存中受益。假设您的 HTML 页面被引用a.css，b.css并且c.css全部分开。所以页面现在必须发出 3 个额外的请求才能显示页面。但是，如果您在一夜之间更改a.css了 ，下次访问者访问您的网页时，他们只需下载a.css，因为服务器将返回 304b.css和c.css。浏览器会知道它不需要重新下载其他两个 CSS 文件。
  • 如果您有第二个页面使用a.css和b.css，浏览器将再次下载新页面的 CSS。

有一些方法可以优化网页资源的下载方式。您可以使用上面提到的浏览器缓存。您还可以跨子域拆分资源，因为大多数浏览器对它们一次可以从单个子域下载的资源数量有限制。您还可以创建一个发布流程，将您的所有 CSS 文件合并并压缩为一个。对你的 JS 文件做同样的事情。

可能还有许多我没有想到的其他想法/问题。希望有帮助。

于 2013-09-06T08:48:07.903 回答