为Vue异步组件生成的块的文件名随机化

如何解决为Vue异步组件生成的块的文件名随机化

我有一个laravel应用程序，可以加载一堆vue组件，并且像异步地加载它们

Vue.component("general-info",function (resolve,reject) { 
  require(["./components/general-info.vue"],resolve)
});

到目前为止，一切都可以正确加载，我面临的唯一问题是浏览器缓存；所有组件都被拆分为小文件，例如：0.js 1.js等 有什么办法可以使用随机文件名而不是顺序号来生成它们？

我正在使用 webpack 构建我的应用程序，它是一个laravel / vue应用程序

编辑

这是我尝试过的

this.webpackConfig.output = {
        path: Mix.isUsing('hmr') ? '/' : path.resolve(Config.publicPath),filename: '[name].js&t=' + new Date().getTime(),chunkFilename: '[name].js&t=' + new Date().getTime(),publicPath: Mix.isUsing('hmr')
            ? `${http}://${Config.hmrOptions.host}:${
                  Config.hmrOptions.port
              }/`
            : '/'
    };

它确实使用缓存清除后缀来构建它们，但不下载带有后缀的附件。

“解决方案”

按照@Michal的建议，我将webpack配置更改为：

filename: '[name].[chunkhash].js',chunkFilename:'[name].[chunkhash].js',

为了使其真正适合我的环境，我 还更改了package.json中的脚本以删除旧的app。[chunk] .js文件 喜欢：

"watch-poll": "rm public/js/* && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch......."

生产上也一样....

现在在我的刀片文件中，我动态加载主应用程序脚本，如下所示：

@PHP
$path = public_path('js');
$files = File::files($path);
$js_file = str_replace(public_path(),'',$files[0]);
@endPHP
<script src="{{ $js_file }}"></script>

也许不是最好的解决方案，但它对我有用。

解决方法

尝试一下：

filename: '[name].[contenthash].js',chunkFilename: '[name].[contenthash].js',

Image of the Webview page

无论如何，使用contenthash优于在每个版本上生成时间戳，因为它可以缓存未更改的块（组件），同时确保浏览器重新下载已更改的块...