ionic/angular, How to force client to clean his browser cache after each release?

Question

I have developed an app using ionic-native 4.7.0. Each time I want to publish my app online I use the command ionic build --minifyjs --minifycss --optimizejs. This is great but my client still get old JS and CSS. They have to clean browser cache in order to see evolutions.

Here a picture of my "compiled" sources :

My 0.js, 1.js, ... Are lazy loaded pages and cached by my client browser. How can I force browser to reset cache after each deployement ?

Thanks !

Answer 1

I found a working solution at https://forum.ionicframework.com/t/bundled-files-and-cache-busting-lazy-loading/109114/9

Create the file config/webpack.config.js in your project with the following content:

    var webpack = require('webpack');
    const defaultWebpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config.js');

    module.exports = function () {
        defaultWebpackConfig.prod.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
        defaultWebpackConfig.dev.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
        return defaultWebpackConfig;
    };

Reference this config in your package.json:

    "config": {
        "ionic_webpack": "./config/webpack.config.js"
    }

Then the files 0.js, 1.js, ... will get random names like 0.91d798902e4dca77e704.chunk.js, no caching problem any more!