用於JS和CSS文件連接的工具

[英]Tools for JS and CSS file concatenating


I recently started working with a large code base with many (15-20) js requests per page. I'm tasked with optimization and performance improvement of these sites.

我最近開始使用大型代碼庫,每頁有許多(15-20)個js請求。我的任務是優化和提高這些網站的性能。

I've been using tools like Google's PageSpeed and Yahoo's YSlow in conjunction with WebPageTest.org's tests to determine a baseline speed of the site and area of improvement. I'm curious if there are some standard or best-practice solutions for concatenation and minification of JS and CSS files.

我一直在使用谷歌的PageSpeed和雅虎的YSlow等工具以及WebPageTest.org的測試來確定網站的基線速度和改進區域。我很好奇是否有一些標准或最佳實踐解決方案用於JS和CSS文件的連接和縮小。

I watched: http://www.youtube.com/watch?v=30_AIEhar-I and the first 20 minutes were really good at hammering mod_pagespeed as a good target.

我看過:http://www.youtube.com/watch?v = 30_AIEhar-I,前20分鍾非常擅長將mod_pagespeed作為一個好目標。

I'm currently considering mod_pagespeed with a YUI compressor and perhaps a sprite generator on top of it all.

我正在考慮使用YUI壓縮器的mod_pagespeed,也許還有一個精靈生成器。

What are some good tools that I may have missed or things that I should be concerned about with my current build?

我可能錯過了哪些好工具或者我當前構建時應該關注的事情?

Edit: It should be noted that this is one page of many (possibly hundreds) and the site receives a new build every two weeks so being able to automate this concatenation and minification is a must, I can't just do it once and call it good.

編輯:應該注意的是,這是一個頁面中的許多(可能是數百個),並且該站點每兩周收到一個新的構建,因此能夠自動化這種連接和縮小是必須的,我不能只做一次並調用好的

Edit 7/30/2012 - I spent some time looking at different tools, it's hard to say which ones are the best but at this time, not very many people use mod_page speed.

編輯7/30/2012 - 我花了一些時間查看不同的工具,很難說哪些是最好的但是在這個時候,並沒有很多人使用mod_page速度。

Closure is more widely used for certain, but even that is lacking. It seems the optimal way to do this is to just use a plugin with YUI.

關閉更廣泛地用於某些,但即使這是缺乏。似乎最好的方法是使用YUI插件。

There are other places that suggest Packer but it seems that many believe the smaller file sizes are eliminated by the necessity to unpack them on the client machine. This stackoverflow response is a good read regarding these types of tools.

還有其他地方建議Packer,但似乎許多人認為,必須在客戶端機器上解壓縮它們,從而消除了較小的文件大小。這種stackoverflow響應是關於這些類型的工具的一個很好的閱讀。


1 个解决方案

#1


2  

Google's Closure Compiler is quite nice for concatenating and minifying JavaScript. It has the added bonus of linting your code for you when you compile, it will remove dead code, and it can also perform compile-time type checking if you include type hints in docblocks.

谷歌的Closure Compiler非常適合連接和縮小JavaScript。它還有一個額外的好處,就是在編譯時為你編寫代碼,它會刪除死代碼,如果在docblocks中包含類型提示,它還可以執行編譯時類型檢查。

In certain cases, the dead code removal feature gives Closure a huge advantage over other minifiers... for example, think of cases where you include a library, but only use about 10% of the functionality. The other 90% can be removed if you compress the library along with the rest of the project.

在某些情況下,死代碼刪除功能使Closure比其他縮小器具有巨大優勢......例如,考慮一下您包含庫的情況,但僅使用大約10%的功能。如果您將庫與項目的其余部分一起壓縮,則可以刪除其他90%。

As for CSS, YUI compressor is probably your best bet if you want something fancy. Otherwise, you could just concatenate the files together using cat and take the hit of a few extra bytes from whitespace.

至於CSS,如果你想要一些奇特的東西,YUI壓縮器可能是你最好的選擇。否則,您可以使用cat將文件連接在一起,並從空白處獲取一些額外的字節。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/07/11/72fc1f11a1c0cab95322853f0dd81bf7.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com