Welcome to Abdul Malik Ikhsan's Blog

Symfony2 : Assetic Bundle – Manage Your Assets

Posted in Symfony2 Framework, Tutorial PHP by samsonasik on July 30, 2011

Tentu tak perlu diperdebatkan, bahwa “A poorly optimized frontend can destroy UX ( User eXperience ), and SEO”. Management asset yang baik sangatlah penting dalam mengoptimalisasikannya. Assetic adalah sebuah asset management library yang powerful yang tersedia dalam Symfony2 Framework Standard Edition. Salah satu dari 14 Performance rule dalam web application development adalah Make few HttpRequest, dan salah satu dari bermacam fitur Assetic Bundle adalah dapat meng-combine assets sehingga dapat me-reduce HttpRequest itu sendiri.

Okeh, anggaplah kita mempunyai resource module ( dalam Symfony2 disebut Bundle, tapi saya lebih suka menyebutnya module, –saya menyebut Bundle untuk component Framework, misal Assetic, Doctrine, Symfony– ) sebagai berikut :

Dari gambar di atas, file dalam folder js dalam Resource Module @Testmodule ( jquery-1.6.2.js and test.js ). Kedua file ini ingin kita panggil di layer View. Pertama, yang harus dilakukan adalah mengubah file app/config.yml :

# Assetic Configuration
assetic:
use_controller: false
debug:          false
filters:
cssrewrite: ~
# closure:
#     jar: %kernel.root_dir%/java/compiler.jar
# yui_css:
#     jar: %kernel.root_dir%/java/yuicompressor-2.4.2.jar

Nah, kalau sudah, kita bisa panggil deh di file layout kita ( output combine : js/combined.js ) :

...............................
<head>
{% javascripts '@Testmodule/Resources/public/js/*' output='js/combined.js'%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
</head>
................................

Nah, untuk lebih meningkatkan performance, kita bisa melakukan caching untuk menghindari pengecekan asset berulang kali dengan mengetikkan di command line sebagai berikut :

Ok deh, sekian dulu,  semoga bermanfaat 🙂

Image :
http://www.lafermeduweb.net/billet/symfony2-les-nouveautes-resume-symfony-live-2011-1061.html

Referensi :
http://www.slideshare.net/caillou/speedy-app-frontend-performance-considerations
http://www.slideshare.net/kriswallsmith/introducing-assetic-asset-management-for-php-53
http://symfony.com/doc/2.0/cookbook/assetic/asset_management.html
https://github.com/symfony/symfony/issues/798

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: