Aspnetcore-angular-universal: Bypass browser caching with new client version

[MaklaCof]

I am experiencing big problems with browser caching, because browser cache my js files (0.js, 1.js, 2.js) and app does not work when I upload new version.
I am using LazyLoading.

I don't know if it is possible, but it would be great if every time when deploy progress runs (_webpack --env.aot_) a new file would be created (maybe with timestamp) instead of 0.js, 1.js, 2.js, ...

I don't know how Angular knows which file must be loaded when loading lazy modules and if it is possible to add timestamp or some constant from source. For example: 0.js?version=2.0, 1.js?version=2.0.
I am using your fantastic project, so I decided to write first to you. If this can not be done with configurations you defined in this project, please let me know and I will go forward and ask Angular community.

[consigliory]

Same issue. +1. @MarkPieszak any ideas how to handle this issue? Looks like tree shaking is not possible with webpack and project with lots of components get giant size and the only way is lazy load it but then this issue is a huge problem

[MarkPieszak]

@MaklaCof @consigliory

In the webpack.prod you're going to want to handle output a little differently. You can check out the webpack docs here (https://webpack.js.org/configuration/output/#output-chunkfilename)

You're going to want:

  /**
   * The filename of non-entry chunks as relative path
   * inside the output.path directory.
   *
   * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
   */

  chunkFilename: '[name].[chunkhash].chunk.js'

The actual bundle vendor & main files are already hash'd by asp.net.

Hope that helps!

If anyone has time to throw in a PR to have it part of the Repo itself that'd be amazing too 👍

[MaklaCof]

Did someone manage to do it. I tried but without success.

[JohnGalt1717]

On the client ONLY webpack.config file (i.e. browser) add this:
output: {
path: root('./wwwroot/dist'),
chunkFilename: isDevBuild ? '[id].chunk.js' : '[id].[hash].bundle.js', //Optimizes the chunks to have hashes to break browser caching on changes. Only production or hmr breaks
},

isDevBuild is a variable I have that is basically !env.Prod

So in development it won't use the hashes because that breaks HMR. However in production it will use them.

In this case that works well because it will compare the release/publish folder and only update the hashes for the ones that have changed before you deploy to your host.

Don't put this on the server side or development client or you'll have major issues and break everything :)

[JohnGalt1717]

Also you don't need to put it on the main output because ASP rendering already tags a unique query string on it so that part is done for you and you won't lose it because the file name changed.

And if you have a vendor file you have to build both the vendor and the standard one at the same time otherwise they'll lose each other.

[MaklaCof]

I change webpack.client.js file, and deploy project from Visual studio 2017, but my files are still named 0.js, 1.js, 2.js.

My webpack.client.js:

const { AotPlugin } = require('@ngtools/webpack');

const { root } = require('./helpers');
const clientBundleOutputDir = root('./wwwroot/dist');

/**
 * This is a client config which should be merged on top of common config
 */
module.exports = {
    entry: {
        'main-browser': root('./Client/main.browser.ts')
    },
    output: {
        path: root('./wwwroot/dist'),
        chunkFilename: /*'[id].chunk.js' : */'[id].[hash].bundle.js', //Optimizes the chunks to have hashes to break browser caching on changes. Only production or hmr breaks
    },
    target: 'web',
    plugins: [

    ]
};

[JohnGalt1717]

change it to:

chunkFilename: !env.prod ? '[id].chunk.js' : '[id].[hash].bundle.js', //Optimizes the chunks to have hashes to break browser caching on changes. Only production or hmr breaks

You have to test if it's production or not. And you have to make sure that you're actually building with --env.prod on your webpack commands in your csproj file. Update if those commands don't have --env.proo on the end and you should be good to go.

(and running webpack --progress --color --env.prod from the command line will do the same)

[MaklaCof]

@JohnGalt1717 Thank you for helping me (and maybe someone else). I must appologize for asking dumb question, but in my defence, 5 months ago I didn't know what github, package.json, webpack ... are.

I am looking for this env (env.prod) variable, but can not find it. Webpack built also return error:

ReferenceError: env is not defined

_BTW:
My deploy run is webpack.js --env.aot --env.client as it is in csproj and package.json files and not webpack.js --prod._
But it seems everything works even without --prod.

[JohnGalt1717]

As noted update your deploy script to have an --env.prod flag.