没有使用 preload-webpack-plugin 的预取文件

Question

我有一个与预取和预加载相关的问题。

我有 vue 应用程序，构建后我在 dist/index.html 中收到双重加载的文件。你可以在下面看到它。

而且 "scripts" 不是 preloaded/prefetched。我不知道为什么。我安装了一个插件。

<head>
<title></title>
<link href=/app.128b43f14088f83cb6c0.js rel=preload as=script>
<link href=/chunk-vendors.128b43f14088f83cb6c0.js rel=preload as=script>

<div id=app></div>
<script src=/chunk-vendors.128b43f14088f83cb6c0.js></script>
<script src=/app.128b43f14088f83cb6c0.js></script>

vue.config.js

modules.export = {
    configureWebpack: () => {
        return {
            devtool: 'source-map',
            output: {
                filename: '[name].[hash].js',
                chunkFilename: '[name].[hash].js'
            },
            plugins: [
                new PreloadWebpackPlugin(),
                new CleanWebpackPlugin()
            ],
            resolve: {
                alias: {
                   styles: path.join(__dirname, 'src/assets')
                }
            }
        }
    }
}

Answer 1

I have vue app and after build I receive double loaded files in my dist/index.html.

Vue CLI 已经注入了自己的 preload plugin，因此您的插件正在复制 preload/prefetch。只需删除您的即可解决重复问题。

您应该坚持使用 Vue CLI 已经提供的那个，因为它经过修改可以与 Vue CLI 工具链一起使用。如果您出于某种原因更喜欢使用自己的插件，您可以删除内置插件：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

没有使用 preload-webpack-plugin 的预取文件

No prefetched files with preload-webpack-plugin

html

javascript

webpack

vue.js

vue-cli