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

Question

我有一个 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......."

生产也一样....

现在在我的 blade 文件中，我动态加载主应用程序脚本，如：

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

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

Answer 1

试试这个：

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

Docs

使用 contenthash 比在每次构建时生成时间戳更好，因为它允许缓存未更改的块（组件），同时确保浏览器 re-downloads 更改的块...

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

Filename randomization for chunks generated for Vue async components

laravel

webpack

vue.js

async-components