The Issue
I am facing a frustrating challenge with cached Vue.js components. Strangely, I cannot replicate this issue on my own devices, but whenever we push client-side updates, users start complaining about broken interfaces. The only solution seems to be clearing the browser cache every time.
My setup involves Laravel + Vue.js in a multipage application format.
Approach
All components are consolidated into one file that is included in app.js as shown below:
Vue.component('task-feed', () => import('./components/task/task-feed'/* webpackChunkName: "/js/components/task-feed" */));
Vue.component('task-item', () => import('./components/task/task-item'/* webpackChunkName: "/js/components/task-item" */));
These are async Vue.js components.
Furthermore, I have configured webpack.mix like so:
let mix = require('laravel-mix');
const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
mix.disableNotifications();
let config = {
watchOptions: {
ignored: /node_modules/
},
resolve: {
alias: {
'vue$': mix.inProduction() ? 'vue/dist/vue.runtime.min.js' : 'vue/dist/vue.runtime.js',
}
},
output: {
chunkFilename: mix.inProduction() ? '[name].[chunkhash].js' : '[name].js',
},
plugins: [
new webpack.HashedModuleIdsPlugin(),
new WebpackChunkHash(),
new ChunkManifestPlugin({
filename: '/js/chunk-manifest.json',
manifestVariable: 'webpackManifest',
inlineManifest: true,
}),
],
};
mix.webpackConfig(config);
Incorporating the ChunkManifestPlugin, I generate chunk-manifest.json and load it in the main layout through this code snippet:
window.webpackManifest = JSON.parse(@json(file_get_contents(public_path('/js/chunk-manifest.json'))));
Queries
Any thoughts on what might be causing this issue? Open to suggestions for resolving it effectively?