Hi all, i have a phoenix application deployed, it’s typically monolith (FE+BE) rolled into a single web server. Somehow, the main javascript file is not cached on firefox (but it is cached on chromium), this is causing huge slowdown as the main javascript file is quite big (1.8 MB gzipped) and redownloaded every page load. Please help!!
Depedencies
Phoenix 1.4.11, Elixir 1.7, Erlang/OTP 22
Deployment/Build process
which deployment process roughly following Introduction to Deployment — Phoenix v1.7.10 (mix compile → npm run deploy → mix phx.digest → mix phx.server)
Example of HTTP request (firefox vs chromium)
Firefox Request Header
GET /js/app.js HTTP/2
Host: ***
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: ***
Cookie: **** some long token and value
TE: Trailers
Firefox Response header
HTTP/2 200 OK
accept-ranges: bytes
cache-control: public
content-encoding: gzip
content-length: 1983671
content-type: application/javascript
date: Wed, 12 May 2021 04:20:33 GMT
etag: “47A0C26”
server: istio-envoy
vary: Accept-Encoding
x-envoy-upstream-service-time: 4
X-Firefox-Spdy: h2
Chromium Request header
:authority: ***
:method: GET
:path: /js/app.js
:scheme: https
accept: /
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cookie: *** random long secret token
if-none-match: “47A0C26”
referer: ***
sec-ch-ua: " Not A;Brand";v=“99”, “Chromium”;v=“90”
sec-ch-ua-mobile: ?0
sec-fetch-dest: script
sec-fetch-mode: no-cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Chromium Response header
Status Code 304
cache-control: public
content-length: 0
date: Wed, 12 May 2021 04:21:56 GMT
etag: “47A0C26”
server: istio-envoy
vary: Accept-Encoding
x-envoy-upstream-service-time: 2
HTML for script
Thanks!