The Problem
I have a problem with cached Vue.js components and I can't reproduce this problem on my devices but every client-side update we get users complains about broken interfaces and only clearing browser cache helps.
I use Laravel + Vue.js and it's multipage app.
Strategy
All components described in one file which included in app.js and it looks like this:
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" */));
There are vue.js async components.
And then i have configured webpack.mix like this:
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);
I'm using ChunkManifestPlugin here, that plugin creates chunk-manifest.json and i load it in the main layout like this:
window.webpackManifest = JSON.parse(@json(file_get_contents(public_path('/js/chunk-manifest.json'))));
Questions
What could be wrong here? Can anyone suggest the way to solve this?
mix.extract
and usemix
helper in blade to version cache main files (manifest,vendor,app) for browser. Then just useWebpackChunkHash
to handle chunk file version and caching for browser.