时间戳

首页 > 解决方案 > 使用 vue 预加载插件为给定组件预加载图像

javascript - 使用 vue 预加载插件为给定组件预加载图像

问题描述

我有一个包含大量图像资产的 vue 应用程序，最近我一直在努力使该应用程序性能更高。Lighthouse 强调预加载图像。我知道 vue 带有一个插件来预加载 css、js、图像和字体的资产。当我在我的vue.config.js. 看来我的所有图像资产都已预加载。我需要实现的是只为特定路线预加载图像。因此，当我调用该路由时，应该预加载该路由中来自不同组件的图像。

这是脚本

  chainWebpack: (config) => {

    config.plugin("preload").tap((options) => {
      options[0].as = (entry) => {
        if (/\.css$/.test(entry)) return "style";
        if (/\.woff$/.test(entry)) return "font";
        if (/\.png$/.test(entry)) return "image";
        if (/\.jpg$/.test(entry)) return "image";
        return "script";
      };
      options[0].include = "allAssets";
      // options[0].fileWhitelist: [/\.files/, /\.to/, /\.include/]
      // options[0].fileBlacklist: [/\.files/, /\.to/, /\.exclude/]
      return options;
    });

  },

下图显示了用户不应该关心的其他路由或组件的预加载图像。 图片供参考 任何帮助或建议将不胜感激。

标签： javascriptvue.jswebpackpreload

解决方案

推荐阅读