8

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?

8
  • Pls describe the complaints ;) What goes wrong?
    – Thomas
    Nov 16, 2018 at 13:46
  • We get users complains about broken interfaces and only clearing browser cache helps.
    – Vaulverin
    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
    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
    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
    Nov 17, 2018 at 9:11

2 Answers 2

6

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.

2
  • Final solution was to delete all plugins that works with chunks and use config from above.
    – Vaulverin
    Jul 2, 2019 at 14:16
  • this solution works fine for me and I don't know why!
    – blank94
    Mar 24, 2020 at 16:33
0

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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.