起因:参考官网,使用Import;百度后使用require和resolve。vue-cli2.0的老项目,看network里面开始的时候发送的请求不多,只有在切换路由的时候才可能会引入新的js。用了新的vue-cli3.0突然发现network一下子全请求了,还以为是懒加载写错了…然后看了下元素,发现在vue-cli3.0中会为所有的js和css资源增加prefetch参数,app、vendors会增加preload参数。

组件提前用prefetch请求,组件使用时创建时动态创建script标签

<link href="/js/chunk-187d0fb0.11c531c6.js" rel="prefetch">
<script charset="utf-8" src="/js/chunk-187d0fb0.11c531c6.js"></script>

vue.config.js增加如下配置,取消prefetch和preload,这样就是点一下,引一下了=,=

  chainWebpack(config) {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
  }

最后,不管取不取消prefetch和preload,都建议写成懒加载的模式,打包时好像就可以分开来打包!
网上看prefetch的功能,好像不会影响首页加载速度,不过现在刚开始做,页面不多,引入的js不多

最近又做vue-cli3.0项目,发现公司没用这个,一堆资源prefetch,震惊之余细细思索。
vue-cli官网preload/prefetch相关配置
preload-webpack-plugin插件官网

目前处理方案:依然删除preload和prefetch属性,只在登录和首页开启prefetch,加快加载速度,其余页面懒加载…

// 开启home页的prefetch
component: () => import(/* webpackChunkName: "about",webpackPrefetch: true */ "../views/Home.vue"),

preload-webpack-plugin配置简单理解(可能不太正确)
as:支持方法为各种不同类型的文件配置不同的类型;
include:不太会用;
fileWhitelist:白名单
fileBlacklist:黑名单

config.plugin("prefetch").tap((options) => {
  // 不能少,options[0]中可能不存在黑白名单
  options[0].fileWhitelist = options[0].fileWhitelist || []
  options[0].fileBlacklist = options[0].fileBlacklist || []
  // 添加内容
  options[0].fileWhitelist.push(/\.js$/)
  options[0].fileBlacklist.push(/test\.js$/)
  return options
})

两种名单都能使用正则,白名单匹配所有正则,但是黑名单会覆盖白名单,将test.js取消prefetch

Logo

前往低代码交流专区

更多推荐