Improve frontend caching

Description

Improve caching of css on frontend by generating new css when url hashes don't match.

TO DO: add hashchunks to css and js references in index.xhtml files

https://webpack.js.org/guides/caching/
https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31

Activity

Show:
Sean Flanigan
October 18, 2017, 12:26 AM

We need to generate a text file which maps say, editor.js to the correct hashed filename for editor.js. Then some Java code can read this and output the correct links in XHTML.

Research links (see webpack-manifest-plugin):

David Mason
October 18, 2017, 12:22 AM

Possible approach:

in zanata-platform/server/zanata-frontend/src/frontend/scripts/build.js:
After the webpack build is finished, we can read the dist directory to find all the actual filenames with hashes in them. The code can find each file by the consistent part before the hash, pull out the hash, and output a .properties file with the file prefix as keys and the hash as values. Update zanata-frontend/pom.xml to include the .properties file in the jar.

Technical notes

  • See fs.readdirSync for reading the directory

David Mason
October 5, 2017, 12:30 AM

We are free to name the files however we like - webpack allows filling in placeholders with values such as the entry module name, the hash, and so on.

The CSS is generated by the ExtractText plugin, so these docs may be needed for reference: https://github.com/webpack-contrib/extract-text-webpack-plugin

Note that zanata-frontend/pom.xml will likely need updating to bring in the files regardless of the name. I think it is hard-coded to a static filename right now.

Sean Flanigan
October 5, 2017, 12:10 AM

If you can ensure the hashed names/URLs include ".cache.", we've already got a filter to set long cache periods, which will be safe to do if the hash changes whenever the content does.

https://github.com/zanata/zanata-platform/blob/f0557779a574574d1a48e601fc15391fccf71bc5/server/services/src/main/java/org/zanata/servlet/GWTCacheControlFilter.java#L46

(We should probably rename that class...)

We can also change the filter rules if there's a different pattern we want to support (perhaps there's a standard webpack convention?).

Ready for Release

Assignee

Patrick Huang

Reporter

Kathryn Gough

Labels

Tested Version/s

None

Components

Sprint

None

Fix versions

Priority

High