The Problem

I have a problem with cached Vue.js ponents and I can't reproduce this problem on my devices but every client-side update we get users plains about broken interfaces and only clearing browser cache helps.

I use Laravel + Vue.js and it's multipage app.

Strategy

All ponents described in one file which included in app.js and it looks like this:

Vueponent('task-feed', () => import('./ponents/task/task-feed'/* webpackChunkName: "/js/ponents/task-feed" */));
Vueponent('task-item', () => import('./ponents/task/task-item'/* webpackChunkName: "/js/ponents/task-item" */));

There are vue.js async ponents.

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?

The Problem

I have a problem with cached Vue.js ponents and I can't reproduce this problem on my devices but every client-side update we get users plains about broken interfaces and only clearing browser cache helps.

I use Laravel + Vue.js and it's multipage app.

Strategy

All ponents described in one file which included in app.js and it looks like this:

Vue.ponent('task-feed', () => import('./ponents/task/task-feed'/* webpackChunkName: "/js/ponents/task-feed" */));
Vue.ponent('task-item', () => import('./ponents/task/task-item'/* webpackChunkName: "/js/ponents/task-item" */));

There are vue.js async ponents.

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?

• javascript
• vue.js
• webpack
• browser-cache
• laravel-mix

• Pls describe the plaints ;) What goes wrong? – Thomas Commented Nov 16, 2018 at 13:46
• We get users plains about broken interfaces and only clearing browser cache helps. – Vaulverin Commented Nov 16, 2018 at 13:56
• Assuming you did use mix in your blade file? i.e. {{ mix('js/manifest.js') }} {{ mix('js/vendor.js') }} {{ mix('js/app.js') }} to prevent cache of main files. – Noogen Commented Nov 16, 2018 at 14:17
• Since you're using laravel and mix, if you haven't, I would suggest doing mix.extract and use mix helper in blade to version cache main files (manifest,vendor,app) for browser. Then just use WebpackChunkHash to handle chunk file version and caching for browser. – Noogen Commented Nov 16, 2018 at 15:48
• Yes we use mix function for any resource file and extraction vendor file too. The problem not in main files but in chunk files. – Vaulverin Commented Nov 17, 2018 at 9:11

2 Answers 2

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.

Configure webpack.mix.js to version your files

let version = 0;

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

mix.js('resources/js/app.js', 'public/v/'+version+'/js')
    .sass('resources/sass/app.scss', 'public/v/'+version+'/css');