2

我有一个加载一堆 vue 组件的 laravel 应用程序，我正在异步加载它们，就像

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>

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

4

1 回答 1

0

尝试这个：

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

文档

无论如何，使用contenthash比在每个构建上生成时间戳要好，因为它允许缓存未更改的块（组件），同时确保浏览器重新下载更改的块......

于 2020-09-30T16:26:27.737 回答