Проблемы кэша браузера с блоками webpack и vue.компоненты js

Проблемы кэша браузера с блоками webpack и vue.компоненты js

16.11.2018 04:42:06 Просмотров 53 Источник

проблема

У меня проблема с кэшированным Vue.JS components и я не можем воспроизвести эту проблему на своих устройствах, но каждое обновление на стороне клиента, которое мы получаем, пользователи жалуются на сломанные интерфейсы, и только очистка кэша браузера помогает.

Я использую Laravel + Vue.js и это многостраничное приложение.

Стратегия

Все компоненты описаны в одном файле, который включен в приложение.js и выглядит это так:

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" */));

Есть вю.асинхронные компоненты js.

А потом я настроил webpack.смешайте вот так:

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

Я использую ChunkManifestPlugin здесь, этот плагин создает chunk-manifest.json и я загружаем его в основной макет вот так:

window.webpackManifest = JSON.parse(@json(file_get_contents(public_path('/js/chunk-manifest.json'))));

Вопросы

Что здесь может быть не так? Может ли кто-нибудь предложить способ решить эту проблему?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/53339039/browser-cache-problems-with-webpack-chunks-and-vue-js-components#comment93557062_53339039
Пожалуйста, опишите жалобы ;) что идет не так?
https://stackoverflow.com/questions/53339039/browser-cache-problems-with-webpack-chunks-and-vue-js-components#comment93557382_53339039
Мы получаем жалобы пользователей на сломанные интерфейсы, и только очистка кэша браузера помогает.
https://stackoverflow.com/questions/53339039/browser-cache-problems-with-webpack-chunks-and-vue-js-components#comment93558089_53339039
Предполагая, что вы использовали mix в своем файле blade? то есть {{mix ('js / manifest.с JS') }} {{ микса('Яш/поставщика.js') }} {{mix ('js / app.js')}} для предотвращения кэширования основных файлов.
https://stackoverflow.com/questions/53339039/browser-cache-problems-with-webpack-chunks-and-vue-js-components#comment93577564_53339039
Да, мы используем функцию mix для любого файла ресурсов и файла поставщика извлечения тоже. Проблема не в основных файлах, а в кусковых файлах.
https://stackoverflow.com/questions/53339039/browser-cache-problems-with-webpack-chunks-and-vue-js-components#comment97780381_53339039
Нет, я все еще не знаю, как решить эту проблему. Я попытался изменить плагин на WebpackChunkHash, как упоминалось в этом обсуждении, но это не дало никакого эффекта.

Ответы - Проблемы кэша браузера с блоками webpack и vue.компоненты js / Browser cache problems with webpack chunks and vue.js components

Является ответом!
ecgk

16.05.2019 04:59:43

В webpack.mix.jsизмените его на этот:

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

Дополнительную информацию смотрите в этой статье.

https://stackoverflow.com/questions/53339039/browser-cache-problems-with-webpack-chunks-and-vue-js-components/56170343#comment100259032_56170343
Окончательное решение состояло в том, чтобы удалить все плагины, которые работают с блоками и использовать config сверху.
Alagie Sellu

28.01.2020 06:36:15

Настройка webpack.смесь.JS для версия файлы

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');
Закрыть X