For boosting performance is recommended to reduce number of requests to web server.
I noticed that too many CSS and JS files are loaded at my site and decided to radically reduce their numbers by merging to one file.
Automatically, configurable, reusable.
It is my first shared project on Github and english language not my mother tongue. I am Sorry!
composer require konstantin-s/silex-assetmerge
$app->register(new Performance\AssetMerge\AssetMergeProvider());
name | default | description |
---|---|---|
active | true | If set to false getScripts() returns HTML code with unmerged files |
alwaysReMerge | false | If set to true on every call getScripts() recreate merged files (useful when you modify scripts and styles) |
fetchRemote | true | If set to true remote files will be downloaded and merged |
flushMerged | false | If set to true method "flushMerged" (Delete all dirs, containing merged JS and CSS files, in configured CssRootDir and JsRootDir) will be called before any action. |
mergedCssRootDir | "/assets/merged/" | Dir where to store merged CSS files. At this dir will be created subdir with name "hash_of_names_files_to_merge" with merged file. Relative to front controller dir. |
mergedJsRootDir | "/assets/merged/" | Dir where to store merged JS files. At this dir will be created subdir with name "hash_of_names_files_to_merge" with merged file. Relative to front controller dir. |
webRoot | result of: $app["request"]->server->get("CONTEXT_DOCUMENT_ROOT") | Used for build absolute filepaths |
$app->register(new Performance\AssetMerge\AssetMergeProvider(), array(
"assetmerge.config" => array(
"active" => true,
"alwaysReMerge" => true,
"fetchRemote" => false,
"mergedCssRootDir" => "/my_merged_css/",
"mergedJsRootDir" => "/my_merged_js/"
)
));
{% set cssFiles = ["/assets/vendor/twbs/css/bootstrap.css",
"/assets/vendor/twbs/css/bootstrap-theme.css",
"/assets/vendor/prism/prism.css",
"/assets/styles/style.css"] %}
{{ app.assetmerge_config.setCssFiles(cssFiles) }}
{% set jsFiles = ["https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js",
"/assets/vendor/twbs/js/bootstrap.js",
"/assets/vendor/prism/prism.js",
"/assets/scripts/common.js"] %}
{{ app.assetmerge_config.setJsFiles(jsFiles) }}
{# You can set parameters, set to inactive for example:
{{ app.assetmerge_config.setactive(false) }}
#}
{{app.assetmerge_merger.getScripts|raw}}
<link href="/assets/merged/6e8109cbc09fbc2b4b1543b8d1f33c14/styles.css" rel="stylesheet" type="text/css"/>
<script src="/assets/merged/df764eb96f1c811270e575caaa87de82/js.js" type="text/javascript"></script>
where
6e8109cbc09fbc2b4b1543b8d1f33c14
anddf764eb96f1c811270e575caaa87de82
is md5 hashes of files names, passed to setCssFiles() and setJsFiles()