[Yesod] Combining several static files together

[Michael Baikov]

When you work on projects with large number of static js/css files the
easiest way to make sure that all of them are added is include them to
defaultLayout (or they will be added by different widgets). As a
result web page ends up loading 10..20 js files and several css files
which is not very optimal.

Is there a way to combine those files with yesod's help on compile
time? Something like

addBunchOfFiles $ do
addScript $ StaticR foo_js
addScript $ StaticR bar_js
addScript $ StaticR baz_coffee
addStylesheet $ StaticR foo_css

so that contents of those files are combined into one js and one css
file, coffeescript compiled to js, resulting files are placed into tmp
folder and both of those files are added?

[Michael Snoyman]

The recommended approach here would be to put those individual snippets into Julius and Lucius files, and then Yesod will automatically concatenate the output for you. Is there a specific reason why you need to use static files instead of templates?

[Felipe Almeida Lessa]

On Thu, Oct 4, 2012 at 7:32 AM, Michael Snoyman <mic...@snoyman.com> wrote:
> The recommended approach here would be to put those individual snippets into
> Julius and Lucius files, and then Yesod will automatically concatenate the
> output for you. Is there a specific reason why you need to use static files
> instead of templates?

AFAICS, a drawback of doing so is that those files will need to be
reprocessed for every request, which may not be desirable.

Cheers,

--
Felipe.

[Michael Baikov]

On Oct 4, 6:32 pm, Michael Snoyman <mich...@snoyman.com> wrote:
> The recommended approach here would be to put those individual snippets
> into Julius and Lucius files, and then Yesod will automatically concatenate
> the output for you. Is there a specific reason why you need to use static
> files instead of templates?

I want to keep static files which are added for every page separate
from dynamic ones which are added for some of them:
Suppose I have 1 js file, 300kb, it will give temporary file with
hashsum A, then suppose that for one page i'd like to add one more js
file - combined file will contain both files, so client browser will
have to download 300kb of info which should be already cached + extra
data, which means that for every combination of included files clients
will have to download that 300kb over and over again. It gets much
worse when I want to add some dynamic data to those lucius/julius
files - client will have do download that 300kb for every request
(polluting my tmp folder with files which never will be used again).

Big combined file can be stored already minified/compressed for gzip
transfer encoding (this can also be true for dynamically

[Michael Snoyman]

Got it, that makes sense. There isn't currently a tool that automatically performs this kind of concatenation. I don't have a solid idea of what something like that would look like, but perhaps something like:

* Create a function like: `megaJS :: [StaticRoute] -> Widget`. We'll come back to what it does.

* Create `myCommonJS` that looks something like `megaJS [jquery_js, jquery_ui_js, underscore_js]`.

* Include `myCommonJS` in all relevant handlers.

`megaJS` itself could then (via usage of unsafePerformIO to create a global variable) concatenate the relevant files together and write them to the filesystem the first time it's called. You might even want to make that optional depending on whether you're in development or production mode.

Don't take this as a solid recommendation, I'm just brainstorming.

Michael

[Felipe Almeida Lessa]

I don't like the unsafePerformIO bit but everything else looks nice
and very useful. It doesn't even need to be JS specific, it could be
applied to everything that is concatenable (which means CSS as well).
Of course, I'm assuming here that your sources are already minified,
which in my practice is true for all but the smallest
snippets/plugins.

Cheers,

--
Felipe.

[Greg Weber]

I don't minify my sources: it makes them harder to debug. We already
have some basic minification capabilities, but we could also have a
combiner be configurable to shell out to uglifyjs or closure compiler.

I have code that does this:
https://gist.github.com/3837808

Besides being ugly with an unsafePerformIO it might also seem strange
because it is from a project just using Hamlet without any Yesod.

[Greg Weber]

new gist for combining files in a Yesod project:

https://gist.github.com/4329559

You should be able to use this now. I had an issue with the minifier from Text.Jasmine and had to turn that off.

I will work with Michael to get this into core.

[Greg Weber]

Bumping this as a feature we should get into the 1.2 release.

[Michael Snoyman]

We actually have some code I wrote for the School of Haskell that does this, with a comment "merge back into Yesod". But it *is* a bit hacky, since relative links in CSS files can be broken, which is why I haven't merged it in yet. I'll try to extract and share it with the list over the next few days.

Side note to everyone: due to Passover, I'll have much less availability, so don't be surprised if I'm suddenly unresponsive.

--
You received this message because you are subscribed to the Google Groups "Yesod Web Framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to yesodweb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.