Making Symfony 2 Assetic development comfortable

Question

I'm looking for ways to make Symfony 2 Assetic 1.0.2 development easier. I use Assetic for dumping/publishing my assets.

Currently I keep running this command in the background:

php app/console assetic:dump --watch

It helps a lot, every change I make to JS or CSS files will automatically get dumped to the public directory where the resources are fetched from by the browser.

However, I have issues with this:

1. If I add a new CSS/JS file, for some reason it does not get dumped. I need to stop the watch, clear the cache and initiate the watch again.

2. It is kind of slow, eats 5%-20% CPU time constantly.

Is there an alternative to development with Assetic? I already tried the approach of serving the resources through a controller (use_controller: true for Assetic), but it was even slower (because let's face the fact, PHP is not for serving static data).

Answer 1

For me, this is the fastest way to develop with Assetic I could find. I tried and I tried to find a better workflow to enhance speed of asset generation, but found none.

There is some work in the master branch of Symfony2 on a ResourceWatcher component which could possibly helps on this issue by:

1. Speeding up the watching process by relying on native resource watcher like inotify
2. Fixing problem when resources are added/removed so they are dumped correctly.

You can watch progress on the component in this PR.

Hope someone will provide some tricks to speed up development with assetic or a completely different workflow.

Regards,
Matt

Answer 2

For slowness, you can run with --no-debug and --forks=4. Install Spork dependency through composer, and run app/console assetic:dump --no-debug --forks=4.

If you have more cores add more forks. If you want to keep core(s) free lower the number. Not sure why it isn’t 4 times faster - doubtless it is not too intelligent about assigning different assetic jobs to different cores - but it’s a start.

Some things I just tried briefly:

time app/console assetic:dump

real    1m53.511s
user    0m52.874s
sys     0m4.989s

time app/console assetic:dump --forks=4

real    1m14.272s
user    1m12.716s
sys     0m5.752s

time app/console assetic:dump --forks=4 --no-debug

real    1m9.569s
user    1m6.948s
sys     0m5.844s

I'm not sure that this will help with --watch, as --watch consumes an entire core on it's own, because while (true) in PHP.

Answer 3

İn developpement use this:

php app/console assets:install web --symlink

Answer 4

1. Configure different filters for development and production. In production you want your JS and CSS minified and uglified, but this is a waste of time during development.

2. Make sure that assetic.debug is false. This will ensure that your JS and CSS files are concatenated, so that all JS and CSS can be fetched in one HTTP request each.

3. If you are using the controller (assetic.use_controller is true) and you have your browser’s developer toolbox open, make sure to uncheck the “Disable cache” checkbox (in Chrome, the checkbox is on the Network pane; in Firefox it is in the settings pane). This will allow your browser to send If-Modified-Since requests — if the files have not changed on the server, the server will return 304 Not modified without recompiling your assets, and the browser will use the latest version from the browser cache.

4. Do not use Assetic to load files from CDNs. Either download the files to your server (manually, using Bower, or whatever), or load them from the CDN by adding <script src=…> or <link rel=stylesheet href=…> directly into your HTML template.