Plugin for Smarty - Combine
The plugin allows you to put together several CSS or Javascript files together.
I agree that there are a lot of similar software solutions, for example, Minify , YUI Compressor, or a consultant from the Pagespeed service from Google. But for the Smarty template engine I didn’t come across anything like that, and I decided to write my own and simpler one.
The plugin works quite simply: when one of the included files changes, it creates a new output file and returns the path to it.
The plugin allows you to solve 2 problems - modularity and control of updating files on the client side.
The problem of modularity is that for relatively complex projects you have to connect a large number of different CSS and JS files. All this leads to additional requests to the server. Yes, front-end servers do an excellent job with this, but why make 10 requests when you can make one? And if you want to reduce this number by the usual methods, you have to use various additional solutions or collect the file manually. For me personally, the file after the first 1000 lines turns into a hellish mess, so I try to divide the code into several modules or fragments.
The problem of controlling resource updates on the client side is no less important. Surely, many people have come across an old version of CSS or JS file for some client, which caused an error due to a changed layout or API on the back-end. And there are really a lot of pitfalls, because caching depends on the browser and on the proxy, and may also depend on the provider (rarely, but some keep a transparent proxy). The only 100% working way is to change the file name. The rest may not work.
The plugin has a list of three input parameters:
I'll tell you why age is needed - input-output operations are one of the most problematic today. Despite the appearance of SSD-drives, the access time to the file is still present and, if there are a lot of file accesses, there may be performance problems in the application. Now this is all well cached, but why go to the cache when you can not do this? Each developer himself has the right to regulate the frequency of checking for the relevance of files, but I would not recommend setting less than 3 seconds, since it is almost meaningless. In my projects, I pass this parameter as a variable, which depends on the mode of operation of the site. If the site is in debug mode, there are 5 seconds, otherwise - 3600.
')
The code is available on github.
Smarty 3 has the ability to create an array on the fly, so the code is given with this feature in mind. For Smarty 2, the array must be passed through a separate variable.
There are several nuances when using the plugin. The path to the files should go from document_root, and the folder with the output file should allow writing and creating new files. You cannot combine CSS and JS files at the same time.
The plugin was tested with Smarty 2 and Smarty 3. Now it is used in the project with an attendance of about 4,000 people per day. I did not observe any problems. I would be grateful for bug reports and development suggestions.
I agree that there are a lot of similar software solutions, for example, Minify , YUI Compressor, or a consultant from the Pagespeed service from Google. But for the Smarty template engine I didn’t come across anything like that, and I decided to write my own and simpler one.
The plugin works quite simply: when one of the included files changes, it creates a new output file and returns the path to it.
The plugin allows you to solve 2 problems - modularity and control of updating files on the client side.
The problem of modularity is that for relatively complex projects you have to connect a large number of different CSS and JS files. All this leads to additional requests to the server. Yes, front-end servers do an excellent job with this, but why make 10 requests when you can make one? And if you want to reduce this number by the usual methods, you have to use various additional solutions or collect the file manually. For me personally, the file after the first 1000 lines turns into a hellish mess, so I try to divide the code into several modules or fragments.
The problem of controlling resource updates on the client side is no less important. Surely, many people have come across an old version of CSS or JS file for some client, which caused an error due to a changed layout or API on the back-end. And there are really a lot of pitfalls, because caching depends on the browser and on the proxy, and may also depend on the provider (rarely, but some keep a transparent proxy). The only 100% working way is to change the file name. The rest may not work.
The plugin has a list of three input parameters:
- input, which is a simple array containing a list of paths to the files being glued together;
- output, which is the path to the output file;
- age, the time in seconds between checking for changes to one of the included files. This parameter can be omitted, by default it is 3600 seconds.
I'll tell you why age is needed - input-output operations are one of the most problematic today. Despite the appearance of SSD-drives, the access time to the file is still present and, if there are a lot of file accesses, there may be performance problems in the application. Now this is all well cached, but why go to the cache when you can not do this? Each developer himself has the right to regulate the frequency of checking for the relevance of files, but I would not recommend setting less than 3 seconds, since it is almost meaningless. In my projects, I pass this parameter as a variable, which depends on the mode of operation of the site. If the site is in debug mode, there are 5 seconds, otherwise - 3600.
')
Source
The code is available on github.
Connection pattern in pattern
Smarty 3 has the ability to create an array on the fly, so the code is given with this feature in mind. For Smarty 2, the array must be passed through a separate variable.
<script type="text/javascript"
src="/{combine input=array('/js/core.js','/js/slideviewer.js') output='/js/big.js' age='30'}" >
There are several nuances when using the plugin. The path to the files should go from document_root, and the folder with the output file should allow writing and creating new files. You cannot combine CSS and JS files at the same time.
The plugin was tested with Smarty 2 and Smarty 3. Now it is used in the project with an attendance of about 4,000 people per day. I did not observe any problems. I would be grateful for bug reports and development suggestions.
Source: https://habr.com/ru/post/193398/
All Articles