CodeIgniter Forums
Cache js or css files - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Best Practices (https://forum.codeigniter.com/forumdisplay.php?fid=12)
+--- Thread: Cache js or css files (/showthread.php?tid=65971)

Pages: 1 2


Cache js or css files - ufhy - 08-17-2016

Hi guys..
I have big problem about caching js or css files.

which should i use, using http header or just direct to js or css files.

for example, i have controllers to load one or multiple js files and caching using http headers: 
PHP Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class 
asset_feed extends CI_Controller 
{
    public function 
script()
    {
        if (
ENVIROTMENT === 'development') {
            
session_write_close();
        }
        
        
$this->output->set_header('Content-Type: text/javascript; charset=UTF-8');
        
$this->output->set_header('Expires: ' gmdate('D, d M Y H:i:s'time() + 3600) . ' GMT');
        
        if (! empty(
$_GET['scripts']) && is_array($_GET['scripts'])) {
            
$data '';
            foreach (
$_GET['scripts'] as $script) {
                
$script_name 'assets/js';
                
$path explode("/"$script);
                foreach (
$path as $index => $filename)
                    if (
preg_match("@^[\w][\w\.-]+$@"$filename))
                        
$script_name .= DIRECTORY_SEPARATOR $filename;
                
                if (
preg_match("@\.js$@"$script_name) && is_readable($script_name)) {
                    
                    
$data .= read_file($script_name);
                    
$data .= ";\n\n";
                }
            }
            
            
$this->output->append_output($data);
        }
    }


and in my view files:
Code:
<script type="text/javascript" src="http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file2.js"></script>

or like this: 

Code:
<script type="text/javascript" src="http://localhost:8000/assets/js/file1.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/js/file2.js"></script>

please some one to teach me..


RE: Cache js or css files - mario - 08-17-2016

Merge all CSS then minimize and save in one file.
Do the same with JS files.
Js file should be before the </body> tag.


RE: Cache js or css files - mario - 08-17-2016

To minimize CSS https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port
To minimize JS https://github.com/tedious/JShrink
If you have errors in merged and minimized js file add semicolon ; on the end of every js files.
I adding it like this in loop
$output_js .= \JShrink\Minifier::minify(file_get_contents($path_to_js_file))."\n;";


RE: Cache js or css files - Diederik - 08-17-2016

Minimizing and concatenating your assets is good practice, but be sure to only concatenate scripts and css that you use on every page of your site. Otherwise you do more harm (in bandwidth) than good.
If you dynamically load all your assets you could end up using http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file2.js on your homepage and on a different page http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file3.js. This way the content of file1.js will be downloaded twice instead of loaded from cache... You migh be better of using http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file2.js&scripts[]=file3.js on all your pages so their is only one request made. The downside is of course that the first page loads longer.


RE: Cache js or css files - ufhy - 08-19-2016

(08-17-2016, 11:46 PM)Diederik Wrote: Minimizing and concatenating your assets is good practice, but be sure to only concatenate scripts and css that you use on every page of your site. Otherwise you do more harm (in bandwidth) than good.
If you dynamically load all your assets you could end up using http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file2.js on your homepage and on a different page http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file3.js. This way the content of file1.js will be downloaded twice instead of loaded from cache... You migh be better of using http://localhost:8000/asset_feed/script?scripts[]=file1.js&scripts[]=file2.js&scripts[]=file3.js on all your pages so their is only one request made. The downside is of course that the first page loads longer.

so, better using 
<script type="text/javascript" src="http://localhost:8000/assets/js/file1.js"></script>

and just combine files js or css like @mario said.

thanks, for your help all.


RE: Cache js or css files - svennd - 08-21-2016

Note that merging JS in an uber file is not per definition the best way to go; it depends on the 1) host and 2) browser and 3) howmuch js/css you need on each page.

http/2 can get all the resources over a single tcp connection, and hence merging the files is a wors idea then just loading what you need*. However http/2 only works on newer systems (it requires openssl 1.0.2) so check with the host.

See for example : https://ma.ttias.be/http1-vs-http2-page-loading/

* depending on the requirements


RE: Cache js or css files - PaulD - 08-21-2016

I use a site.css for the site layout or css commonly used on most pages. The same with a site.js file.

But then I dynamically load additional js and css assets for individual pages if required. Those dynamically loaded css and js files are still loaded from a single assets folder so once loaded are cached by the browser.

I tried minifying css files and js files but to be honest the difference is so minimal that I just can't be bothered maintaining a .min.css and a .min.js as it seems that at most I save 100kb, the size of one image. I know that seems lazy (and on customer sites where I am finishing up I do minimise them) but on sites with constant maintenance constantly having to generate these on every change is incredibly time consuming, and to be honest a real PITA.

I think when you use a template or perhaps a css generator like sass or less you often get a css file with thousands of lines. I write all mine from scratch and even my biggest is still only a couple of hundred lines.

Lazily yours,

Paul

PS I recently discovered this <picture> container allowing you to serve different images to different view ports. Although I have not used it yet in any sites, I am going to use it in the next site. That is going to save soooooo much bandwidth to mobiles. Much more so than minimising css files.


RE: Cache js or css files - ufhy - 08-22-2016

know, i found library Assets on archive pyrocms CI version http://codeigniter.pyrocms.com/ , it very easy load js or css files in every page and auto combine every js or css files base on group.


RE: Cache js or css files - spjonez - 08-26-2016

There are lots of options, having CI or any PHP framework minify your assets is not ideal. You'll have to implement your own cache/invalidation if you build on page view. Grunt and Gulp have various plugins to minify assets using a build command before you deploy. Require.js is the best solution but requires the most work.


RE: Cache js or css files - mwhitney - 09-16-2016

There are also a number of PHP task runners and asset libraries which can perform the same tasks as Grunt, Gulp, and Require.js. There's no need to wedge Node.js into your project and/or deployment process if you're not using it already. For example, see Assetic and Robo or Bldr.