Magento 2 Static Content Lesson Learned
The Irish Store website uses CDN to be able to distribute static files together with media images faster. In this case Apache 2 server is less stressed with all incoming requests coming from customers. Even 1 customer while requesting a single page can generate 200 incoming requests.
We have been using AWS S3 as a storage to serve our static content files including JavaScript, HTML, CSS since project launch. Once static files are generated on one of Magento 2 server we manually copy magento/pub/static content to AWS S3 storage for further usage by CDN server. All worked fine except the fact that every second release there were some glitchy things happening for our customers.
Never change JavaScript files in Magento 2
I mean we all do mistakes and sometimes these mistakes are visible by users. It is not a problem to address issues, fix a bug, test it and push changes to production server so that our “happy” customers are getting even more “happier” — sarcasm enabled.
In most of cases in order to fix or add new feature which require JavaScript change we add new function into existing file. It could lead to even bigger issue because the file “shopping-cart.js” has Cache-Control: max-age=<seconds> header set to 1 month or even 1 year. The file is cached in browser after first user visit for this period. All changes done in this file will be updated in browser in a year.
In best case you would have in browser’s console something like:
TypeError: plugin.setSuspendState is not a function
TypeError: undefined is not an object (evaluating ‘this.addPageVar’)
At worst Add to Cart button isn’t clickable or Checkout page can’t be loaded:
The reason for this in Magento 2 up to Magento 2.1.2 release that path for all static files is always same. As far as I remember there was some issue related to signed version of the static content that is why we haven’t use it from the beginning. It doesn’t matter whether you have change in the JavaScript or even CSS file or not.
http://magento212.dev/static/frontend/Magento/luma/en_US/mage/dataPost.js
With Magento 2.1.3 and further versions there is a prefix created for every static path generated.
http://magento215.dev/static/version1492289532/frontend/Magento/luma/en_US/mage/dataPost.js
The “version” prefix followed by unique identified is created and added after static directory.
Every time you trigger bin/magento setup:static-content:deploy command new version of static files is generated. It means that page requests unique static content and old files will never be requested.
How to enable Static Version support
In order to enable versions support for static content in Magento 2 the Sign Static Files field should be enabled. Navigate to Magento Admin -> Stores -> Configuration -> Advanced -> Developer.
Change Sign Static Files setting to “Yes” and hit “Save Config” button. Make sure to flush cache after it.
Takeaways
As in all stories there is 2 possible endings. First one and probably preferable one is The Irish Store customers lived happily ever after. But, you have to do few things to make life easier:
- Upgrade to Magento 2.1.6+ (latest) release with Static Versions support.
- Enable Sign Static Files setting.
- Add Content-type: max-age=604800 (at least 1 week) header for all static content in the magento/pub/static/.htaccess file.
- Create new JavaScript components for new functionality.
Resources
Read more about Cache-Control header
Example on how to build JavaScript Widget using Jquery library in Magento 2
