javascript - Browser cache problems with webpack chunks and vue.js components - Stack Overflow

admin管理员组

文章数量:1302352

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

Share Improve this question Follow edited Mar 25, 2021 at 20:54 miken32 42.8k1616 gold badges123123 silver badges173173 bronze badges asked Nov 16, 2018 at 13:42 VaulverinVaulverin 8511 silver badge44 bronze badges 8

• 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

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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.

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

本文标签： javascriptBrowser cache problems with webpack chunks and vuejs componentsStack Overflow