禁止preload runtime.js

发布于 2022-09-11 22:50:55 字数 1883 浏览 16 评论 0

使用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)
    }
    ...
}

图片描述

图片描述

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

许久 2022-09-18 22:50:55

参考官网源码@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$/]
            }])
      )
菩提树下叶撕阳。 2022-09-18 22:50:55

能不能贴一下你的配置文件? 这里看的话,无法看懂....

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文