vue动态引入导致资源重复问题

前言

近日在对项目压测中，发现项目的部分静态资源会请求两次，遂排查之。

排查流程

在网络中，监测【7a25d8aa】的来源

1. 在打包产物的入口html中，发现该资源引入：

使用prefetch进行预加载

2. 在产物的js逻辑中，发现该资源引入：

其中的r.e方法就是插入script的方法：

所以在路由加载的时候，会再次请求该资源。

经过上述的问题排查，将怀疑点转向了vue的动态路由,动态组件和动态引入资源

// 动态组件
@component({
    template: require("./index.html"),
    components: {
        "u-login": () => import(`./logins/login7`)
    }
})

// 动态路由
{
    name: "login",
    path: "/login",
    title: "登录",
    component: () => import("@/views/login")
}

// 动态引入资源（localforage）
const localStorage = import("localforage").then(async (localforage) => {
    if (typeof window === "object") {
        await localforage.default.ready();
    }

    return localforage.default;
});

这三种方式会导致打包产物的html中存在一个prefetch的link,并且在js中也会有一个该资源的动态引入，遂存在两次资源引入

思考与总结

vue router的懒加载以及资源的import动态引入，都是官方推荐的方式。所以不需要特意去修改。 对于两次资源引入的问题，经过后续观察，存在以下情况：

prefetch的资源的资源会走prefetch cache也不会造成服务器或者带宽的压力。

但是对于使用动态方式引入特定组件的逻辑（也就是上面的第一段代码）是可以改成常规引入组件的。