[Feature] Cache static files, prevent caching dynamic contents

[GetoXs]

Hey I though it could be usefull to turn on production mode:

1. Caching static content (js, css) - they all should have different stamp every deploy
2. Prevent caching dynamic content like html/xhr etc.

[julianpoemp]

Thanks for your suggestions! I had thought about this topic before and what do you think about this:

1. Allow caching of angular generated files (that one with hash code in file name)
2. Selection of files and folders that shouldn't be cached. This selection could be that one from the "exclusions" section.

[GetoXs]

I find out avery good configuration from https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess That could be very usefull to add it as an option into generator :) Or maybe mode like dev/prod presets eg:

• Disable X-Powered-By <IfModule mod_headers.c> Header unset X-Powered-By Header always unset X-Powered-By </IfModule>
• Disable server signature ServerSignature Off
• and I have setup out cache configuration base on ext expires and mimetype. json and text/html has 0 expiration time.

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS

    ExpiresByType text/css                              "access plus 1 month"


  # Data interchange

    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/geo+json                  "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/calendar                         "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"


  # Favicon (cannot be renamed!) and cursor images

    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML

    ExpiresByType text/html                             "access plus 0 seconds"


  # JavaScript

    ExpiresByType application/javascript                "access plus 1 month"
    ExpiresByType application/x-javascript              "access plus 1 month"
    ExpiresByType text/javascript                       "access plus 1 month"


  # Manifest files

    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"


  # Markdown

    ExpiresByType text/markdown                         "access plus 0 seconds"


  # Media files

    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"


  # WebAssembly

    ExpiresByType application/wasm                      "access plus 1 year"


  # Web fonts

    # Collection
    ExpiresByType font/collection                       "access plus 1 month"

    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType font/otf                              "access plus 1 month"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/ttf                              "access plus 1 month"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"
    ExpiresByType font/woff2                            "access plus 1 month"


  # Other

    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

</IfModule>

[julianpoemp]

I aggree that there could be more options. Because that has nothing to do with caching, I created a new issue: #3

I think the caching issue could be too complex, because each Angular app probably needs another catching strategy. There is a notice over the boilerplate you have posted:

If you don't control versioning with filename-based cache busting, you should consider lowering the cache times to something like one week.

https://github.com/h5bp/html5-boilerplate/blob/ffd36de013ff00e2623c6ea35675b1c4763a4524/dist/.htaccess#L1052

The browser-caching problem affects all files that are not created by angular and are not named with a hash string (only in prod mode). My apps I created until now were affected with this problem because I had to load some files via XHR requests from the assets folder (e.g. JSON files or Javascript).

In order to set the expiration values properly you have to know exactly what kind of files will change, how often will it be changed and how important is it that the correct file is loaded on client side. But this creates a problem: It depends on the app.

Perhaps it's possible to create an option to define expiration rules in the generator...🤔