如何缩小JS或CSS的dynamic
如何在运行/运行时缩减JS和CSS,这样,如果在运行时/运行时将原始代码结构缩小,我就可以将原始代码结构保留在服务器中。
经过大量的search和网站优化,我真的build议使用这个脚本的CSS文件:
<style> <?php $cssFiles = array( "style.css", "style2.css" ); $buffer = ""; foreach ($cssFiles as $cssFile) { $buffer .= file_get_contents($cssFile); } $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); $buffer = str_replace(': ', ':', $buffer); $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); echo($buffer); ?> </style>
它将所有的CSS文件压缩成一个文件,并将其过滤为html,将附加请求的数量减less到零。 如果你喜欢这个,你也可以制作你自己的compressed.css文件,而不是把样式粘贴到html中。
我认为你的问题实际上应该是:我如何可靠和可重复地更新我的现场服务器? 你需要的是一个自动部署脚本。 我个人比较喜欢布料 ,但也有其他工具可用。
一个自动部署脚本将允许你运行一个单独的命令,它将转到服务器上并更新源代码,运行任何部署步骤(比如缩小javascript)并重新启动web服务器。
你真的不希望在dynamic缩小javascript或css文件,你应该在部署时做到这一点,然后在你的代码中有一个variables,指定这是否是一个实时部署。 如果variables是真的,那么你的文件链接应该是最小化版本的链接,如果它是假的,那么他们应该是正常版本。
有一些程序执行最小化,还没有提到的是JSMin 。
如果你的目标是让JavaScript的可读性稍差,并且在运行时做到这一点,你可以保持它非常简单。 只需三行代码,您就可以在几毫秒内完成全部缩小工作。
// make it into one long line $code = str_replace(array("\n","\r"),'',$code); // replace all multiple spaces by one space $code = preg_replace('!\s+!',' ',$code); // replace some unneeded spaces, modify as needed $code = str_replace(array(' {',' }','{ ','; '),array('{','}','{',';'),$code);
这不会做任何语法检查。 使用此代码后,代码可能会失效。 检查你的JS的行结束,是一个';' 失踪的地方?
HTML5 Boilerplate带有一个方便的构build脚本,可以压缩JS,CSS,图像等等。 一探究竟!
正如其他答案中所解释的那样,“实际”即时缩小(每次请求dynamic压缩文件)都不是一个好主意。
如果我可以这么自由地说话,
缩小JS / CSS文件的目标是让它更快parsing(并且占用更less的磁盘空间)。 通过在运行时缩小它,这个好处将被完全丢失。
也许我错了你的最终目标,但这是我一开始想到的。
编辑 :由@Ant张贴澄清了我。
Assetic是一个很好的项目,有助于组织资源,如CSS和Javascript,包括缩小。 看到这里的介绍。
一般来说,运行时缩减应该总是与服务器端的可靠caching以及浏览器使用的客户端和代理caching相结合。
如果你完全控制了你的Apache / Ngnixconfiguration,一个很好的select(一般来说)就是启用PageSpeed模块,
- js-minifyfilterhttps://developers.google.com/speed/pagespeed/module/filter-js-minify
- css-rewritefilterhttps://developers.google.com/speed/pagespeed/module/filter-css-rewrite
这正是WebUtilities (用于J2EE)的function。 链接在这里。
它正在进行缩小和合并。 如果资源没有被修改,它也有caching来避免重新运行资源的缩小或重新处理。 它也有助于以下优化。
- 在一个请求中提供多个JS或CSS文件
- 为JS,CSS和图像文件添加Expires头文件,以便被浏览器caching
- dynamic缩小JS,CSS文件
- Minify内联CSS和JS代码块
- 添加字符编码到您的回应
- 服务器压缩的内容(gzip / compress / deflate)
- 通过避免重新处理caching响应来加速加载
请看看,如果你觉得有趣。
我怀疑这种缩小热潮如果JS是用zlib压缩发送的话,真的会造成很大的不同。
首先,白色空间压缩得非常好,因此缩小文件大小可能只是像jQuery这样的大型库(它可能应该从CDN提供,除非需要黑客版本)才是一个主要问题。
确切地说,JS通常被客户端caching,所以除非你在不同的页面上使用了很多不同的脚本,大多数页面加载都不会有所作为。
缩小问题和为什么我不这样做(除了像jQuery的东西):A)它删除评论,所以除非你重新添加它们,像版权声明的东西丢失。 这可能会导致许可证违规,因为甚至许多OSS许可证都要求版权保持完好。
B)当出现问题时,很高兴看到服务器正在服务的实际代码,以防与正在使用的工作副本不同。 小代码在这方面做得不好。
我的个人意见 – zlib在飞行中压缩,是的。 minify – 只用于真正的大文件。
性能parsingJS到解释器 – 也许如果浏览器运行在32MB RAM的Apple Performa上。 我不买,它使大多数脚本真正的世界性差异。 缓慢的页面通常很慢,因为同时运行的代码太多,效率太低,或者对超载的服务器发出太多的请求。 (IE你真的需要检查用户名的可用性,因为我input每个字母?你不能检查当我改变到不同的领域或当我点击提交???;)