没有预加载webpack插件的预取文件



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

  1. 我有vue应用程序,在构建之后,我在dist/index.html中收到了双重加载的文件。你可以在下面看到它
  2. 此外,"脚本"不会被预加载/预取。我不知道为什么。我安装了一个插件。

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

我有vue应用程序,在构建后,我在dist/index.html中收到双重加载的文件。

Vue CLI已经注入了自己的预加载插件,因此您的插件正在复制预加载/预取。只需删除您的即可解决重复问题。

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

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

最新更新