区分开发和生产环境的 PHP 中的打包、缓存、JS 和 CSS

Posted 2023-02-22

【中文标题】区分开发和生产环境的 PHP 中的打包、缓存、JS 和 CSS

【英文标题】：Packing, caching, JS and CSS in PHP that differentiate between development and production environment

【发布时间】：2011-03-30 21:36:52

【问题描述】：

我正在努力使开发变得容易并在生产中高度优化输出。

我想做的事情的目标是：

快速制作页面！

我希望

Google Page Speed

和

YSlow

返回

最佳

分数。这意味着：

合并和压缩 JS 文件和 CSS 并将组定位在 html 中的正确位置（页面底部或顶部）。对于 .js，Google Closure 似乎是最佳选择。 .JS 和 .CSS 被巧妙地缓存，但要确保在 .JS 或 CSS 组件更新时重新加载它们。 301 文件未更改等。 缓存类型：我认为磁盘上的缓存很好。如果 APC 和 Memcache 或 Redis 能显着提高速度，请考虑它们。 能够在必要时指定和使用 .JS 的延迟加载，或至少不阻塞页面呈现。 （可选）也压缩 HTML。

让网站开发变得简单

：

当您想要包含 .js 或 .css 并仅在生产环境中压缩它们时，请在 .php 文件中使用短命令 使用 pack_js(['first.js', 'second.js' 'third.js']) 和 pack_css(['first.less', 'second. less' 'third.css'], true) 易于配置开发或生产环境。也许只是对 SetDebug(true or false) 的调用。 默认制作 轻松设置缓存文件夹和源文件夹 使用 LESS 来减少 CSS 开发的麻烦。在生产环境中自动编译 CSS 中的 LESS 文件，但在开发环境中使用 LESS.js，这样每次您在开发环境中更改 .less 文件时，它都会在服务器上更新。 （可选）在开发中，它包括一个 JS 和一个 LESS 控制台，类似于https://www.squarefree.com/bookmarklets/webdevel.html 的 shell

注意：如果 Apachee 模块和 .htaccess 文件可以显着加快进程，则可以使用它们。但它应该能够快速设置它们，理想情况下只需要一个设置命令。

有什么东西可以做到这一点吗？或者什么是开始的最佳资源？

我更喜欢包含一个 PHP 脚本（最终是几个 .php 文件、.htaccess 和压缩可执行文件）的解决方案，该脚本使用 Google Closure Compiler 压缩 .JS 并压缩/编译 CSS/LESS 文件以去除无用的 cmets和空白。可以在生产服务器上使用特殊的 cookie 来输出开发版本。

我想要：

一个可以像这样使用的 php 函数：pack_js(['first.js', 'second.js', 'third.js']) 写成这样：

在开发服务器上：

<script type="text/javascript" src="static/js/first.js"></script>
<script type="text/javascript" src="static/js/second.js"></script>
<script type="text/javascript" src="static/js/third.js"></script>

在生产服务器上（如果特殊 cookie 不存在）：

<script type="text/javascript" src="cache/12a42323bfe339ea9w.js"></script>

另一个函数：pack_css(['first.less', 'second.less', 'third.css'], true) 写如下：

在开发服务器上：

<link rel="stylesheet/less" href="/static/css/first.less" type="text/css" />
<link rel="stylesheet/less" href="/static/css/second.less" type="text/css" />
<link href="/static/css/third.css" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>

在生产服务器上（如果特殊 cookie 不存在）：

<link href="/cache/46537a8b8e876f7a8e7.css" type="text/css" />

第二个参数指定是否应该在开发服务器上输出less.js

显然 12a42323bfe339ea9w.js 和 46537a8b8e876f7a8e7.css 是脚本的优化、打包和编译版本。此解决方案应该能够检测源文件何时更改并重新编译脚本以进行生产。它应该可以配置为关于脚本的位置和缓存类型（磁盘很好）。理想情况下，pack_js 应该有一个选项，可以在生产中延迟加载 js。

欢迎任何建议。

【问题讨论】：

我在周围找到的一些组件：<a href="/default/index/tourl?u=aHR0cDovL2ZhZGV5ZXYubmV0LzIwMTAvMDYvMTkvbGVzc2pzLXdpbGwtb2Jzb2xldGUtY3NzLw%3D%3D" rel="nofollow" target="_blank">fadeyev.net/2010/06/19/lessjs-will-obsolete-css</a>JS 中的“官方”less。 ----- leafo.net/lessphp PHP 中的实现更少，但看起来有问题-- --- github.com/sunny/csscaffold 类似于 LESS 但不完全一样的东西 ----- cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool （一个 JS/CSS 打包器，但在 Ruby 中） ----- code.google.com/p/php-closure （但我可以在服务器上安装 java 版本)

如果链接未编译的 CSS/LESS 文件，则页面将无法正确呈现。我认为您能做的最好的事情就是链接到已编译但尚未缩小的版本。我个人只是为这类事情使用单独的开发/生产服务器（我不喜欢直接在实时站点上工作），但您也可以根据 cookie 的存在从 CSS/JS 文件名中添加/删除 .min .我看不出像“46537a8b8e876f7a8e7.css”这样的临时文件名有什么好处，尽管我确实在较大的网站上看到了很多。

不，使用less.js，它会在浏览器中编译.less 文件。它非常适合开发。保存时它还会重新加载 .less 文件。

啊，我不知道你能做到这一点。 +1

@Chris，你有什么更新？

【参考方案1】：

仍在努力探索利用现有资源的最佳解决方案。

CSS-JS-Booster 和 Turbine 到目前为止看起来是最好的起点：http://github.com/Schepp/CSS-JS-Booster 和 http://turbinecss.org/

其他 JS/CSS 组合器解决方案和文章

http://code.google.com/p/minify 很好，但似乎有点难以配置。 http://rakaz.nl/code/combine 让你像这样使用 sintax：http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js（不是最好的）我也认为我看到了这个脚本的补丁，但我现在找不到它。 （使用示例http://brainfart.com.ua/post/code-cache-combine/） http://www.ejeliot.com/blog/72 和 http://www.ejeliot.com/samples/combine/combine.phps Ed Eliot combine.php 解决方案。它只让您指定一次要合并的文件 http://aciddrop.com/php-speedy/ 其他解决方案。 http://www.artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/ mod_concat 的使用及其他解决方案概述 http://wordpress.org/extend/plugins/w3-total-cache/ 那是一个 WordPress 插件。让它独立于 Wordpress 非常有趣，但可能需要做很多工作。 http://bakery.cakephp.org/articles/view/combine-your-js-css-files-for-faster-loadingCakePHP 解决方案

JS 压缩和缓存的资源：

http://code.google.com/p/php-closure/ PHP 脚本可让您结合 .js 文件和可组合的 Google Closure REST API。检查时间戳并在本地缓存组合版本。 http://dean.edwards.name/download JS 打包器压缩器/混淆器。我不确定减压需要多长时间。但它能够将使用 Closure 编译/缩小的 jQuery 1.4.2 从 71946 字节（几乎减少 30%！）缩小到 50639 字节，并启用 Base62 编码！比较 gzip 压缩的版本会很有趣。关于 JS 混淆 Packer 优化器使篡改 JS 代码变得更加困难。 http://thinkvitamin.com/dev/serving-javascript-fast/关于 gzip 和缓存的精彩讨论 http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_toolRuby Juicer JS/CSS 打包工具

LESS 编译器/教程/工具：

http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3 Less.js 教程/介绍。 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-jsless.js的介绍（有用的cmets） http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/和http://github.com/cloudhead/less.js是用JS编写的LESS编译器，也可以在浏览器中添加。非常适合开发 http://lesscss.org/ LESS 是什么。最初是用 Ruby 编写的，但有很多不同的语言实现， http://leafo.net/lessphp/ PHP 写的编译器少（好像没更新） 960 是另一种让事情变得更简单的方法； http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/ http://github.com/everzet/sfLESSPlugin交响乐中的LESS http://drupal.org/project/less Drupal CSS 预处理器 http://github.com/sunny/csscaffold 类似于 LESS 但不完全是的 PHP 解析器 http://code.google.com/p/maven-less-plugin/ maven-less-plugin 使用 rhino、envjs 和 less.js 在 maven 构建的进程源阶段将 less-code 转换为 css。最后，您将获得一个带有现成 css 代码的工件。

在部署时选项：

http://phing.info/docs/guide/stable/ Phing 是 PHP 中的构建/部署系统 http://www.capify.org/index.php/CapistranoRuby 解决方案

【参考方案2】：

您为什么不使用项目构建系统将您的应用程序部署到执行此操作的生产服务器？对于 PHP，您可能喜欢 Phing，因为它允许您在 PHP 中编写额外的插件，您可以在部署时执行这些插件。您可能要考虑采取这条路线的其他选项是Ant 和Capistrano（还有很多其他选项），但是这些需要其他语言的知识（当然，如果您真的想要，您可以从它们启动 php 解析器到...）。

【讨论】：

这可能是一条可能的路线。我不知道Phing。我会调查的。你有什么建议已经按照我的要求去做了吗？也许一些示例文件？我想在 .php 中保留一个简单的语法，这样我就可以控制 .js 和 .css 组在输出 HTML 中的顺序和位置？

【参考方案3】：

好问题！

我曾处理过具有类似要求的流程，但我们采用了一些不同的方法。我意识到它可能不完全是您所追求的，但仍会提出一些建议：

使压缩/编译成为运输过程的一部分。（您可能已经在这样做，但从上面看不清楚）。 也在开发服务器上压缩/编译它。调试/测试可能很麻烦，但您希望能够确保生产版本和测试版本尽可能相似。如果您拥有多个开发阶段，那么您可以压缩其中一个。 只有通过某种质量扫描（例如jslint）才进行压缩/编译 不要组合模块 - 将它们分开。您将获得的性能优势将微不足道，几乎毫无意义。 不要更改 HTML，只需更改依赖模块的内容。

我意识到它与您的意图有点不同，但根据我的经验，它会导致更强大的开发促进模型。

【讨论】：

我的意思是在第一次 .js 更改时运行编译部分，然后缓存生成的文件。 (1) 可能没问题，但在部署时必须是自动的。 (2) 我同意。测试应该在产品上运行。版本。的文件。 (3) 是的，在 JS 中创建一个很好的方式来表示错误是我想要的。 (4+5) 不正确。每个模块都是对服务器的 http 请求。为了使站点快速，您需要将它们减少到最小加上 less.js 必须仅在生产中。 HTML 也可以去除无用的 cmets 和空格。你对我应该从哪里开始有什么建议吗？

我所知道的没有什么已经为你做了这件事。听起来你的组织有一个非常具体的过程，你需要自己建立它。我不知道您的模块的规模或预期的流量，但仍会与您竞争 4 和 5。我想我们会同意disagee ;)

Re 4-5：网上有几篇文章描述了结合 js 和 css 文件的好处（例如：sitepoint.com/blogs/2007/04/10/…）。我建议阅读高性能网站 -> oreilly.com/catalog/9780596529307 甚至更快的网站 -> oreilly.com/catalog/9780596522315 和