Browser cache problems with webpack chunks and vue.js components

Question

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?

Answer 1

In webpack.mix.js change it to this:

mix.config.webpackConfig.output = {
    chunkFilename: 'scripts/[name].[chunkhash].js',
    publicPath: '/',
};

Refer to this article for more information.