webpack 块和 vue.js 组件的浏览器缓存问题

Posted 2023-02-22

【中文标题】webpack 块和 vue.js 组件的浏览器缓存问题

【英文标题】：Browser cache problems with webpack chunks and vue.js components

【发布时间】：2019-04-19 17:05:07

【问题描述】：

问题

我的缓存 Vue.js 组件有问题，我无法在我的设备上重现此问题，但我们收到的每个客户端更新都抱怨界面损坏，只有清除浏览器缓存才有帮助。

我使用 Laravel + Vue.js，它是一个多页面应用程序。

策略

在一个文件中描述的所有组件都包含在 app.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" */));

有 vue.js 异步组件。

然后我像这样配置 webpack.mix：

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

问题

这里可能有什么问题？任何人都可以提出解决这个问题的方法吗？

【问题讨论】：

请描述投诉 ;) 出了什么问题？

我们让用户抱怨界面损坏，只有清除浏览器缓存才有帮助。

假设您确实在刀片文件中使用了 mix ？即 mix('js/manifest.js') mix('js/vendor.js') mix('js/app.js') 以防止缓存主文件。

因为你使用 laravel 和 mix，如果你还没有，我建议你做 mix.extract 并在刀片中使用 mix 助手来版本缓存主文件（清单，供应商，应用程序）对于浏览器。然后只需使用WebpackChunkHash 处理块文件版本和浏览器缓存。

是的，我们也对任何资源文件和提取供应商文件使用混合功能。问题不在主文件中，而是在块文件中。

【参考方案1】：

在webpack.mix.js 中将其更改为：

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

请参阅this article 了解更多信息。

【讨论】：

最终解决方案是删除所有适用于块的插件并使用上面的配置。

这个解决方案对我来说很好，我不知道为什么！

【参考方案2】：

配置 webpack.mix.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');