Bundled files and cache busting, lazy loading


#1

Hi all,
looking for an elegant solution for forcing cache buster.
Right now,I get troubles when bundled files (main.js, vendor.js & co) get an upates.
One simple solution may be be to enable:

  • on build, versioning of file, i.e. appending a unique string to filenames, e.g. main.9d20886f478d1f484d41ec3d3f7119d5.js
  • changing reference in index.html file
    but seems however that there may be issues while lazy loading

I know that some other frameworks have plugins that enable this (.e.g Laravel mix versioning [3:14]

Anything existing, any thought ?

Cheers


#2

Hi gydev,

I used Gulp to cache busting the main.js and main.css on the way you said.

The problem is to do the same with the page files. That ones with numbers. 1.js, for example. Right now, I am looking for a solution for these ones.

All the best!


#3

ok, good to know, I am not used with gulp, I assume we can achieve the same with webpack which is used with ionic.
Wondering why the ionic team did not address this out of the box in the buidling process, I assume they surely encountered this issue ?


#4

I am also having cache busting problems with lazy load. the main.js and main.css files can be changed but not the lazy loaded generated ones.


#5

Don’t know how to solve this issue, too.


#6

I have written a short tutorial explaining how this can be achieved.

It’s not ideal as its not completely dry but not too bad either (depends on how often you publish). Basically you need to adapt the webpack configuration and the index.html file.


#7

ohh sounds nice, I’ll have a look over the weekend ! Thanks for letting us know!
Herzlichen Dank und schöne Wochenende!


#8

There is a discussion on Github about this https://github.com/ionic-team/ionic-app-scripts/issues/201, I have implemented the solution by bergergit on 29 Nov 2017 and seems to work with lazy loading as well. The only file that doesn’t add the hash is polyfills.js


#9

Hi.
I solved it following this simple steps:

1. Create “config” directory in the root path of my project with following “webpack.config.js” file:

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;
};

2. Add this lines to my package.json:

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

Et voilĂ ! Problem solved.

Hope it helps!


#10

See: [PWA] Service worker app cache duration


#11

Super helpful, thanks!

Combined with meirmsn’s code from: https://gist.github.com/meirmsn/9b37d6c500654b9a487e0c0a72583ef2

it makes a great complete solution

(swap this code in for the webpack.config.js code)


#12

For the record, I found and documented the solution in [PWA] Service worker app cache duration yesterday. Using workbox instead of sw-toolbox seems to handle better the “cache busting” when redeploying a new app