[{"data":1,"prerenderedAt":353},["ShallowReactive",2],{"\u002Farticles\u002Fsetversion-automate-your-caching-process":3},{"id":4,"title":5,"body":6,"createdAt":343,"description":344,"extension":345,"meta":346,"navigation":347,"path":348,"rawbody":349,"seo":350,"stem":351,"__hash__":352},"articles\u002Farticles\u002Fsetversion-automate-your-caching-process.md","setVersion() – Automate Your Caching Process",{"type":7,"value":8,"toc":341},"minimark",[9,18,21,80,83,86,168,184,187,309,320,334,337],[10,11,12,13,17],"p",{},"Caching your assets is a great and easy way to speed up your site’s load times. However, it can be time consuming to rename files and messy to keep several versions of files on your server. A lot of sites have used query strings, ",[14,15,16],"code",{},"styles.css?v=1",", to accomplish this cache. I believe it’s better to use a full, versioned filename like styles.1.css, so that the user’s browsers pulls a distinct file. It’s a fairly simple process and I’ll show you how to automate the numbering.",[10,19,20],{},"First we need to turn on expiration for the files you want to have a long-lasting cache. This goes in your .htaccess file:",[22,23,29],"pre",{"className":24,"code":25,"filename":26,"language":27,"meta":28,"style":28},"language-bash shiki shiki-themes github-light github-dark","\u003CFilesMatch \"\\.(css|js|jpg|gif|png)$\">\n    ExpiresActive On\n    ExpiresDefault \"access plus 10 years\"\n\u003C\u002FFilesMatch>\n",".htaccess","bash","",[14,30,31,51,61,70],{"__ignoreMap":28},[32,33,36,40,44,48],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"szBVR","\u003C",[32,41,43],{"class":42},"sVt8B","FilesMatch ",[32,45,47],{"class":46},"sZZnC","\"\\.(css|js|jpg|gif|png)$\"",[32,49,50],{"class":38},">\n",[32,52,54,58],{"class":34,"line":53},2,[32,55,57],{"class":56},"sScJk","    ExpiresActive",[32,59,60],{"class":46}," On\n",[32,62,64,67],{"class":34,"line":63},3,[32,65,66],{"class":56},"    ExpiresDefault",[32,68,69],{"class":46}," \"access plus 10 years\"\n",[32,71,73,75,78],{"class":34,"line":72},4,[32,74,39],{"class":38},[32,76,77],{"class":42},"\u002FFilesMatch",[32,79,50],{"class":38},[10,81,82],{},"In the above snippet, we are searching for stylesheets, scripts and images and setting their expiration date to 10 years from now.",[10,84,85],{},"Now, we need to setup a RewriteRule to handle the new file names. This also goes in the .htaccess file:",[22,87,89],{"className":24,"code":88,"filename":26,"language":27,"meta":28,"style":28},"RewriteEngine On\nRewriteRule ^(.*)\\.[0-9]+\\.(css|js|jpg|gif|png)$ $1.$2 [L]\n",[14,90,91,98],{"__ignoreMap":28},[32,92,93,96],{"class":34,"line":35},[32,94,95],{"class":56},"RewriteEngine",[32,97,60],{"class":46},[32,99,100,103,106,109,113,116,119,122,125,127,129,132,135,138,140,143,145,148,150,153,156,160,162,165],{"class":34,"line":53},[32,101,102],{"class":56},"RewriteRule",[32,104,105],{"class":46}," ^",[32,107,108],{"class":42},"(",[32,110,112],{"class":111},"sj4cs",".",[32,114,115],{"class":46},"*",[32,117,118],{"class":42},")",[32,120,121],{"class":111},"\\.",[32,123,124],{"class":46},"[0-9]+",[32,126,121],{"class":111},[32,128,108],{"class":42},[32,130,131],{"class":56},"css",[32,133,134],{"class":38},"|",[32,136,137],{"class":56},"js",[32,139,134],{"class":38},[32,141,142],{"class":56},"jpg",[32,144,134],{"class":38},[32,146,147],{"class":56},"gif",[32,149,134],{"class":38},[32,151,152],{"class":56},"png",[32,154,155],{"class":42},")$ ",[32,157,159],{"class":158},"s4XuR","$1",[32,161,112],{"class":46},[32,163,164],{"class":158},"$2",[32,166,167],{"class":42}," [L]\n",[10,169,170,171,173,174,177,178,181,182,112],{},"Please note that you must turn the ",[14,172,95],{}," on. In this snippet, the server searches for the same asset extensions as above and applies a rule to them: read file ",[14,175,176],{},"styles.12345.css"," as ",[14,179,180],{},"styles.css",". Using this rule, you only have to keep one version of each file on your server, ",[14,183,180],{},[10,185,186],{},"So you could stick with what we’ve done so far and be set. Each time you wanted to update the cache, you’d change the number where you’re linking the asset. But, if you’re like me, that’s going to get really old, fairly quickly. Let’s bring in some server-side scripting to automate this process for you. Here’s a PHP function to rename the file on the fly:",[22,188,192],{"className":189,"code":190,"language":191,"meta":28,"style":28},"language-php shiki shiki-themes github-light github-dark","function setVersion($url){\n    $path       = pathinfo($url);\n    $version    = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';\n    $cache_file = str_replace('.', $version, $path['basename']);\n    print $path['dirname'].'\u002F'.$cache_file;\n}\n","php",[14,193,194,205,219,256,279,303],{"__ignoreMap":28},[32,195,196,199,202],{"class":34,"line":35},[32,197,198],{"class":38},"function",[32,200,201],{"class":56}," setVersion",[32,203,204],{"class":42},"($url){\n",[32,206,207,210,213,216],{"class":34,"line":53},[32,208,209],{"class":42},"    $path       ",[32,211,212],{"class":38},"=",[32,214,215],{"class":111}," pathinfo",[32,217,218],{"class":42},"($url);\n",[32,220,221,224,226,229,231,234,237,240,243,245,248,250,253],{"class":34,"line":63},[32,222,223],{"class":42},"    $version    ",[32,225,212],{"class":38},[32,227,228],{"class":46}," '.'",[32,230,112],{"class":38},[32,232,233],{"class":111},"filemtime",[32,235,236],{"class":42},"($_SERVER[",[32,238,239],{"class":46},"'DOCUMENT_ROOT'",[32,241,242],{"class":42},"]",[32,244,112],{"class":38},[32,246,247],{"class":42},"$url)",[32,249,112],{"class":38},[32,251,252],{"class":46},"'.'",[32,254,255],{"class":42},";\n",[32,257,258,261,263,266,268,270,273,276],{"class":34,"line":72},[32,259,260],{"class":42},"    $cache_file ",[32,262,212],{"class":38},[32,264,265],{"class":111}," str_replace",[32,267,108],{"class":42},[32,269,252],{"class":46},[32,271,272],{"class":42},", $version, $path[",[32,274,275],{"class":46},"'basename'",[32,277,278],{"class":42},"]);\n",[32,280,282,285,288,291,293,295,298,300],{"class":34,"line":281},5,[32,283,284],{"class":111},"    print",[32,286,287],{"class":42}," $path[",[32,289,290],{"class":46},"'dirname'",[32,292,242],{"class":42},[32,294,112],{"class":38},[32,296,297],{"class":46},"'\u002F'",[32,299,112],{"class":38},[32,301,302],{"class":42},"$cache_file;\n",[32,304,306],{"class":34,"line":305},6,[32,307,308],{"class":42},"}\n",[10,310,311,312,315,316,319],{},"This function is pretty straight forward. First, ",[14,313,314],{},"pathinfo()"," returns an array containing various parts of the file. Then creates a string containing the last modified time of the asset file using ",[14,317,318],{},"filemtime()",". Next up is replacing the dot in the original file with our timestamp string. Lastly, we print out the new filename.",[10,321,322,323,326,327,330,331,112],{},"Once you include that function on your page, it’s really simple to use, replace ",[14,324,325],{},"\u002F-\u002Fcss\u002Fdefault.css","\nwith ",[14,328,329],{},"\u003C?php setVersion('\u002F-\u002Fcss\u002Fdefault.css'); ?>"," and you’ll get: ",[14,332,333],{},"\u002F-\u002Fcss\u002Fdefault.1298645866.css",[10,335,336],{},"Together, with your .htaccess rule and PHP function, you’ve fully automated the caching process. Next time you save or upload an asset, the timestamp will be automatically updated.",[338,339,340],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":28,"searchDepth":53,"depth":53,"links":342},[],"2011\u002F04\u002F24","Caching your assets is a great and easy way to speed up your site’s load times. However, it can be time consuming to rename files and messy to keep several versions of files on your server. A lot of sites have used query strings, styles.css?v=1, to accomplish this cache. I believe it’s better to use a full, versioned filename like styles.1.css, so that the user’s browsers pulls a distinct file. It’s a fairly simple process and I’ll show you how to automate the numbering.","md",{},true,"\u002Farticles\u002Fsetversion-automate-your-caching-process","---\ntitle: setVersion() – Automate Your Caching Process\ncreatedAt: 2011\u002F04\u002F24\n---\nCaching your assets is a great and easy way to speed up your site’s load times. However, it can be time consuming to rename files and messy to keep several versions of files on your server. A lot of sites have used query strings, `styles.css?v=1`, to accomplish this cache. I believe it’s better to use a full, versioned filename like styles.1.css, so that the user’s browsers pulls a distinct file. It’s a fairly simple process and I’ll show you how to automate the numbering.\n\nFirst we need to turn on expiration for the files you want to have a long-lasting cache. This goes in your .htaccess file:\n\n```bash[.htaccess]\n\u003CFilesMatch \"\\.(css|js|jpg|gif|png)$\">\n\tExpiresActive On\n\tExpiresDefault \"access plus 10 years\"\n\u003C\u002FFilesMatch>\n```\n\nIn the above snippet, we are searching for stylesheets, scripts and images and setting their expiration date to 10 years from now.\n\nNow, we need to setup a RewriteRule to handle the new file names. This also goes in the .htaccess file:\n\n```bash[.htaccess]\nRewriteEngine On\nRewriteRule ^(.*)\\.[0-9]+\\.(css|js|jpg|gif|png)$ $1.$2 [L]\n```\n\nPlease note that you must turn the `RewriteEngine` on. In this snippet, the server searches for the same asset extensions as above and applies a rule to them: read file `styles.12345.css` as `styles.css`. Using this rule, you only have to keep one version of each file on your server, `styles.css`.\n\nSo you could stick with what we’ve done so far and be set. Each time you wanted to update the cache, you’d change the number where you’re linking the asset. But, if you’re like me, that’s going to get really old, fairly quickly. Let’s bring in some server-side scripting to automate this process for you. Here’s a PHP function to rename the file on the fly:\n\n```php\nfunction setVersion($url){\n\t$path       = pathinfo($url);\n\t$version    = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';\n\t$cache_file = str_replace('.', $version, $path['basename']);\n\tprint $path['dirname'].'\u002F'.$cache_file;\n}\n```\n\nThis function is pretty straight forward. First, `pathinfo()` returns an array containing various parts of the file. Then creates a string containing the last modified time of the asset file using `filemtime()`. Next up is replacing the dot in the original file with our timestamp string. Lastly, we print out the new filename.\n\nOnce you include that function on your page, it’s really simple to use, replace `\u002F-\u002Fcss\u002Fdefault.css`\nwith `\u003C?php setVersion('\u002F-\u002Fcss\u002Fdefault.css'); ?>` and you’ll get: `\u002F-\u002Fcss\u002Fdefault.1298645866.css`.\n\nTogether, with your .htaccess rule and PHP function, you’ve fully automated the caching process. Next time you save or upload an asset, the timestamp will be automatically updated.\n",{"title":5,"description":344},"articles\u002Fsetversion-automate-your-caching-process","GFk-A9LywC-4e7JG5-vg5A_8YW7UF8J6VLd7YFm1dIE",1792156978022]