禁止preload runtime.js

使用vue-cli搭建的项目。今天在用inline-manifest-webpack-plugin将提取出的运行时文件内嵌到index.html中发现了一个有preload引发的问题。

开发模式下没有异常,在生产环境下,发现内嵌了一份runtime.js的同时,又预加载了一份不存在的runtime.js文件。preload的作用就是将需要的资源预先用link并追加到页面头部,指示着浏览器在闲置时间预取 runtime.js 文件。但是inline-manifest-webpack-plugin处理后,这个runtime.js就被删除了。所以在不关闭preload功能的前提下,怎样不去preload runtime.js?

//vue.config.js
const path = require("path")
const webpack = require("webpack")
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); //html插入dll.js
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');



module.exports = {
    chainWebpack: config => {
        config.optimization.runtimeChunk('single')
        // config.optimization.usedExports(true)
        // config.optimization.sideEffects(true)
        ...
        config
            .plugin('html')
            .tap(args => {
                args[0].filename = "index.html"
                args[0].template = "./public/index.html"
                args[0].title = "webpack"
                args[0].favicon = "./public/favicon.ico"
                args[0].minify = {
                    ...
                }
                return args
            })
        config
            .plugin('asset-html')
            .use(AddAssetHtmlPlugin, [{
                filepath: path.resolve(__dirname, './dll/*.dll.js')
            }])
        config
            .plugin('dll')
            .use(webpack.DllReferencePlugin, [{
                manifest: require("./dll/vue-manifest.json")
            }])
        config
            .plugin('inline-manifest')
            .use(InlineManifestWebpackPlugin)
    }
    ...
}

图片描述

图片描述

图片描述

阅读 5.8k
2 个回答
新手上路,请多包涵

参考官网源码@vue/cli-service

针对使用@vue/preload-webpack-plugin插件的属性fileBlacklist进行改动,添加不希望预先加载的模块

config
  .when(process.env.NODE_ENV !== 'development',
    config => {
      config
        .plugin('preload')
            .use(PreloadPlugin, [{
              rel: 'preload',
              include: 'initial',
              fileBlacklist: [/\.map$/, /runtime\..*\.js$/, /hot-update\.js$/]
            }])
      )
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题