I have a laravel app that loads a bunch of vue components and I am loading them asynchronously like
Vue.component("general-info", function (resolve, reject) {
require(["./components/general-info.vue"], resolve)
});
and so far all is loading properly the only problem I am facing is with browsers cache; all components are being splited in small files like: 0.js 1.js etc is there any way I can generate them using random file names instead of sequential numbers?
I am using webpack to build my app, its a laravel/vue app
EDIT
This is what I've tried
this.webpackConfig.output = {
path: Mix.isUsing('hmr') ? '/' : path.resolve(Config.publicPath),
filename: '[name].js&t=' + new Date().getTime(),
chunkFilename: '[name].js&t=' + new Date().getTime(),
publicPath: Mix.isUsing('hmr')
? `${http}://${Config.hmrOptions.host}:${
Config.hmrOptions.port
}/`
: '/'
};
it does build them with a cache busting suffix, but doesn't download them attaching the suffix.
"Solution"
As @Michal suggested I changed the webpack config to:
filename: '[name].[chunkhash].js',
chunkFilename:'[name].[chunkhash].js',
To make it really fit to my environment I also changed my scripts in package.json to remove old app.[chunk].js files like:
"watch-poll": "rm public/js/* && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch......."
also same for production....
Now in my blade files, I load the main app script dynamically like:
@php
$path = public_path('js');
$files = File::files($path);
$js_file = str_replace(public_path(), '', $files[0]);
@endphp
<script src="{{ $js_file }}"></script>
Perhaps is not the best solution but it is working for me.
Try this:
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
Using contenthash is better than generating timestamp on every build anyway because is allows caching of unchanged chunks (components) while ensures browser re-downloads changed ones...