I would like user's browser to cache external .css and .js files. However, each time I made changes, I would want user's browser to be able to load the updated external files instead of using the previous cache.
I found out that by adding parameter when including ext .css and .js files will help. But when I did this, I found out that browser no longer cached the files but kept on loading the external files each time I visited the page. May I know how I can solve this?
Basically you have 2 options:
Use Etag. If you hosting provider allows it you could configure Etag in a .htaccess file:
<Directory /path/to/directory>
FileETag INode MTime Size
</Directory>
Not an parameter, add the version as a part of the filename. E.g.: style_10.css
To understand caching I recommend Mark Nottingham's caching tutorial: http://www.mnot.net/cache_docs/.
If you set the proper "Expires" headers the files will be cached even if you add dynamic URL parameters. For that is indeed the most efficient way to handle your problem.
Most web servers will use the files' modified dates to report whether files have changed to the browser. And browsers should correctly ask for files with an If-Modified header so that cached copies will be used.
Are you sure the browser isn't already doing the right thing?
