how to caching javascript file

Question

I have a large web application that was built about 9-8 years ago with "pug" technology, and in recent years pages have been added in an innovative framework (vue.js) Now in any transition between an old page (pug) and a vue page, the Webpack (version 3.12) loads a build.js file (3.8MB!) that Located in index.html and takes an average of 9 seconds to load and significantly Interferes with the UX.

is there any way I can save the build.js in the cache? or alternatively, I would love to hear if anyone has another idea that can enhance the user experience

the webserver of the site is Nginx

edit: here is my nginx file (the relevant parts)

server {
    listen      80;
    server_name xxx.com;
    return 301 https://xxx$request_uri;
}

server {
    listen       443 ssl;
    server_name xxx.com;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1000;
      location ~ ^/dist/(?:ico|css|js|gif|jpe?g|png)$ {
        expires 30d;
    }
    location ~ ^/public/(\d+)/(.+)$ {
         try_files /lbo_builds/build_$1/public/$1/$2 =404;
    }

    location ~ ^/export/data/(.+)$ {
        gzip_static always;
        add_header Content-Encoding gzip;
        add_header Content-disposition attachment;
        try_files /lbo_exported_files/$1.gz =404;
    }

    location /customer_upload_document_proxy {
        proxy_set_header Cookie JSESSIONID=$cookie_jba_session;
        proxy_pass xxx;
    }

    location / {
        expires off;
        add_header Cache-Control "max-age=0, no-store, no-cache, must-revalidate";

        proxy_set_header X-Forwarded-For $remote_addr;

        proxy_pass http://$backend_upstream$request_uri;
    }
}

emptyhua · Answer 1 · 2021-11-01T23:18:13.130

0

Split the single huge build.js into small chunks to take advantage of browser’s parallel downloading.
configure gzip compression and cache control with nginx

server {
    listen      80;
    server_name xxx.com;
    return 301 https://xxx$request_uri;
}

server {
    listen       443 ssl;
    server_name xxx.com;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1000;

    location ~ ^/public/(\d+)/(.+)$ {
         try_files /lbo_builds/build_$1/public/$1/$2 =404;
    }

    location ~ ^/export/data/(.+)$ {
        gzip_static always;
        add_header Content-Encoding gzip;
        add_header Content-disposition attachment;
        try_files /lbo_exported_files/$1.gz =404;
    }

    location /customer_upload_document_proxy {
        proxy_set_header Cookie JSESSIONID=$cookie_jba_session;
        proxy_pass xxx;
    }

    location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
        expires 30d;
        
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_pass http://$backend_upstream$request_uri;
    }

    location / {
        expires off;
        add_header Cache-Control "max-age=0, no-store, no-cache, must-revalidate";

        proxy_set_header X-Forwarded-For $remote_addr;

        proxy_pass http://$backend_upstream$request_uri;
    }


}

edited Nov 01 '21 at 23:18

answered Nov 01 '21 at 11:04

emptyhua

6,634
10
11

1

Not only because of parallel downloading but mostly because chunks can be lazily imported per need basis. – Estus Flask Nov 01 '21 at 11:07
I added this code to my Nginx conf file, but it still doing the same slow render. (the build.sh file is located under the dist folder inside the root) do you have an idea what I am missing? " location ~ ^/dist/(?:ico|css|js|gif|jpe?g|png)$ " – Eran Sevil Nov 01 '21 at 14:34
You can follow this post to check if the cache take effected https://stackoverflow.com/questions/13140318/check-whether-network-response-is-coming-from-server-or-chrome-cache – emptyhua Nov 01 '21 at 14:39
yes, I checked it, unfortunately it doesn't do caching, – Eran Sevil Nov 01 '21 at 14:43
did you reload nginx after editing the confgure file? – emptyhua Nov 01 '21 at 14:46
when i deploy to test env, my script doing reload, so yes. – Eran Sevil Nov 01 '21 at 14:53
Could you update your post to provide nginx conf and http response header in Network tab of Chrome Developer Tools? – emptyhua Nov 01 '21 at 15:01
updated my answer, you could give it a try. – emptyhua Nov 01 '21 at 15:43
my deploy to test env failed (i add bracket it was missing in your snippet code) – Eran Sevil Nov 01 '21 at 16:29
weird, `^/dist/(?:ico|css|js|gif|jpe?g|png)$` in your conf did not match build.js, `~* \.(?:ico|css|js|gif|jpe?g|png)$` in my conf should work – emptyhua Nov 01 '21 at 23:24

how to caching javascript file

1 Answers1