click-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Adrian A. (JIRA)" <>
Subject [jira] Commented: (CLK-542) Optimize CSS & JS when in production & profile modes
Date Wed, 29 Apr 2009 09:16:30 GMT


Adrian A. commented on CLK-542:

I think the problem is more complicated than that, and a smarter solution is required:
- there are basically two issues here that need to be solved separately:
   #1 compresion (+obfuscation) of js and css
   #2 concatenation of files

- with Click the user doesn't know what resources to process:
> files="text.css,utilClasses.css,layout.css,color.css,whitespace.css,chrome.css,
> css3.css,screen.css,formsPage.css,avoka.css"
> files="jquery-1.3.1.min.js,siteBase.js,readerSniff.js"
is known only by Click and differs from page to page because:
   #3 Click does smart resource inclusion (without the user caring too much)

#1 does not work always correctly:
  - various compressors produce bad code too, or bring up hidden bugs
  - finding a bug with the compressed resources is a total pain (almost impossible)
  - compressing before deploy will skip the detailed test phase
Solution for #1 adopted by many is to:
-  use a naming convention to distinct compressed files from plain ones and have both in the
   file_name.js(css) -> file_name.pack.js(css)
-  js/css framework compressed files (like jQuery, prototype, etc.) to be used from the original
site - not compressed by the user(since they test the compressed files too - no end user will
write unit tests for his own compressed jQuery)
- let the server side (in this case Click) decide what file to deliver (compressed or plain)
based on the debug/switch - e.g. also when in production for a short time it is required to
turn debug on.

#2 it is not efficient at all to make a big file. Also sometimes #2 is required without #1
(so only concatenation - to debug problems)
Others frameworks use various solutions for this. E.g. Rails has Sprockets:
that does a smarter concatenation based on comments and conventions inside those files.

#3 Since Click is already smart with each page, maybe it could supply this information to
know what to concatenate - it would be a pity to give up this smart behavior.
E.g. it could produce for each page a ThePage.css and ThePage.js with the concatenated
resources that are required only in ThePage.

> Optimize CSS & JS when in production & profile modes
> ----------------------------------------------------
>                 Key: CLK-542
>                 URL:
>             Project: Click
>          Issue Type: New Feature
>          Components: core, extras
>            Reporter: Malcolm Edgar
>            Priority: Minor
> Use optimized CSS and JS click includes when the application mode is "profile" or "production".
  Use the YUI Compressor to perform optimization at Click build time for example:
> 	<target name="optimize-resources">
> 		<concat destfile="WebRoot/css/screen-all.css" >
> 			<filelist dir="WebRoot/css/" files="text.css,utilClasses.css,layout.css,color.css,whitespace.css,chrome.css,css3.css,screen.css,formsPage.css,avoka.css"/>
> 		</concat>
> 		<java jar="lib/build/yuicompressor-2.4.2.jar" fork="true" failonerror="true">
> 		 	<arg value="-o"/>
> 		 	<arg value="WebRoot/css/screen-min-${build.version}.css"/>
> 		 	<arg value="WebRoot/css/screen-all.css"/>
> 		 </java>
> 		<delete file="WebRoot/css/screen-all.css" failonerror="false"/>
> 		<!-- JS -->
> 		<concat destfile="WebRoot/javascript/javascript-all.js" >
> 			<filelist dir="WebRoot/javascript/" files="jquery-1.3.1.min.js,siteBase.js,readerSniff.js"/>
> 	   </concat>
> 		<java jar="lib/build/yuicompressor-2.4.2.jar" fork="true" failonerror="true">
> 		 	<arg value="-o"/>
> 		 	<arg value="WebRoot/javascript/javascript-min-${build.version}.js"/>
> 		 	<arg value="WebRoot/javascript/javascript-all.js"/>
> 		 </java>
> 		<delete file="WebRoot/javascript/javascript-all.js"  failonerror="false" />
> 	</target>

This message is automatically generated by JIRA.
You can reply to this email to add a comment to the issue online.

View raw message