附加JS，CSS和所有其他供应商文件的最佳方法是什么？

Question

假设您有一个PHP网站，并且有很多Javascript和CSS个文件。
但每JS＆amp; CSS文件不会附加在所有页面上 有些人喜欢：您已经 18个 CSS个文件和 23个 JS个文件，这些文件的总和是< EM> 31 。你有3个PHP个文件，例如：

1. 的index.php
2. about.php
3. contact.php

并非所有这些 31 文件都会附加在每个PHP页面上 5 CSS和 10 JS个文件将附加index.php
由于 10 CSS和 12 JS文件将附加about.php等等... 现在的问题是，“你将如何处理这些 31 文件，要么将所有这些文件放在一个页面上，然后包含在所有PHP文件上，要么附加respactive页面？”

Answer 1

将所有CSS文件合并到一个文件中。如果您使用的工具，您可以保留单独的源文件（易于使用）并编译它们并将它们最小化为单个文件以供下载。

使用JavaScript执行相同操作。

这样，你只有两个文件也很小。这些文件可以静态提供，并且使用正确的标头，客户端将很好地缓存它们。发送比每页所需数据更多的数据会产生一些开销，但是您的请求要少得多，因为在一些文件中有一些文件可以在页面请求之间缓存。

尝试这个想法的在线工具示例：

• cssminifier.com/用于CSS
• jscompress.com/在线JavaScript缩小
• Leafo's PHP SCSS compiler（我将这个用于我的个人网站）。

Answer 2

选择权属于您自己，并且取决于您希望在多大程度上提高绩效。你真的有两个选择：

1. 简单的选择是将所有文件编译成单个css和单个js文件，并将它们包含在所有页面中。

2. 更难选择但更高效（取决于所有javascript和css的大小）是一个css / js文件包含所有共享css / js然后另一个css / js文件页面，包含该页面的特定css / js。

请注意，解决方案2不仅更难以实现，而且在某些情况下甚至可能更慢。什么会降低您的性能最多的是多个http请求。因此，如果您决定在页面中加载这31个文件而不编译它们，那将对您的表现产生非常不利的影响。

编译css和js的一些好工具是：

http://gulpjs.com/ 要么 http://gruntjs.com/

在nodejs https://nodejs.org/

上运行