Question

我总是远程开发，我通常最终得到一个大的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文件本身）以及所有事情都会自动发生且不会弄乱工作流程的事实。

你们对此有何看法？

Answer 1

将大型JS和CSS文件拆分成多个文件是一种很好的开发实践。话虽这么说，这里有一些优点和缺点，你的解决方案，即时组合它们。您可能已经考虑过这些问题......但无论如何它们都在这里：

优点：

客户提出单一请求。

缺点：

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

有多种方法可以优化网页的资源下载方式。您可以使用上面提到的浏览器缓存。您还可以跨子域拆分资源，因为大多数浏览器都限制了他们一次可以从单个子域下载的资源数量。您还可以创建一个发布过程，将所有CSS文件合并并缩小为一个。并为您的JS文件执行相同的操作。

我可能还有很多其他想法/问题没有想过。希望有所帮助。

与PHP简单的CSS / JS连接：优点和缺点？

1 个答案: