在 Webpack 中使用 预加载(Preloading) 技术可以通过动态导入(import())以及指定预加载的方式来进行优化

news2025/1/16 13:52:48

1. Webpack 中的预加载和预获取

Webpack 提供了两种注释:

  • /* webpackPreload: true */:用于预加载当前页面需要的关键资源。
  • /* webpackPrefetch: true */:用于预获取未来可能用到的资源(如下一个页面的资源)。

2. 如何使用注释实现预加载

(1) 预加载关键资源

使用 /* webpackPreload: true */ 注释,告诉 Webpack 预加载某个模块。

示例:预加载关键组件
const PreloadedComponent = import(
  /* webpackPreload: true */
  './PreloadedComponent.vue'
);
示例:在路由配置中使用预加载
{
  path: '/preload',
  component: () => import(
    /* webpackPreload: true */
    './views/PreloadPage.vue'
  ),
}

(2) 预获取未来资源

使用 /* webpackPrefetch: true */ 注释,告诉 Webpack 预获取某个模块。

示例:预获取未来页面
const PrefetchedComponent = import(
  /* webpackPrefetch: true */
  './PrefetchedComponent.vue'
);
示例:在路由配置中使用预获取
{
  path: '/prefetch',
  component: () => import(
    /* webpackPrefetch: true */
    './views/PrefetchPage.vue'
  ),
}

3. Webpack 预加载和预获取的工作原理

(1) 预加载(Preload)

  • 加载时机:立即加载,优先级较高。
  • 适用场景:当前页面需要的关键资源。
  • 行为:Webpack 会生成 <link rel="preload"> 标签,浏览器会立即加载这些资源。

(2) 预获取(Prefetch)

  • 加载时机:浏览器空闲时加载,优先级较低。
  • 适用场景:未来可能用到的资源(如下一个页面的资源)。
  • 行为:Webpack 会生成 <link rel="prefetch"> 标签,浏览器会在空闲时加载这些资源。

4. 示例:在 Vue 路由中使用预加载和预获取

以下是一个完整的 Vue 路由配置示例,结合了预加载和预获取:

const routes = [
  {
    path: '/',
    component: () => import(
      /* webpackPreload: true */
      './views/Home.vue'
    ),
  },
  {
    path: '/about',
    component: () => import(
      /* webpackPrefetch: true */
      './views/About.vue'
    ),
  },
  {
    path: '/contact',
    component: () => import(
      /* webpackPrefetch: true */
      './views/Contact.vue'
    ),
  },
];

解释:

  • Home.vue:使用 webpackPreload,因为它是首屏页面,需要立即加载。
  • About.vueContact.vue:使用 webpackPrefetch,因为它们是用户可能访问的下一个页面。

5. 如何检查预加载和预获取是否生效

(1) 使用 Chrome DevTools

  • 打开 Chrome DevTools,切换到 Network 选项卡。
  • 刷新页面,查看是否有 <link rel="preload"><link rel="prefetch"> 标签。
  • 检查资源的加载顺序和优先级。

(2) 查看打包结果

  • 运行 npm run build,查看生成的 HTML 文件。
  • 检查是否有类似以下的标签:
<link rel="preload" href="/static/js/Home.1234.js" as="script">
<link rel="prefetch" href="/static/js/About.5678.js" as="script">

(3) 使用 Webpack Bundle Analyzer

  • 使用 webpack-bundle-analyzer 分析打包结果,查看预加载和预获取的模块是否被正确拆分。

6. 注意事项

  • 不要滥用预加载和预获取
    • 预加载会立即加载资源,可能会影响当前页面的性能。
    • 预获取会在浏览器空闲时加载资源,但如果预获取的资源过多,可能会占用带宽。
  • 结合用户行为
    • 例如,在用户 hover 到某个链接时,动态触发预获取。
示例:动态触发预获取
const link = document.querySelector('a[href="/about"]');
link.addEventListener('mouseover', () => {
  import(
    /* webpackPrefetch: true */
    './views/About.vue'
  );
});

7. 总结

  • Webpack 支持通过注释实现预加载和预获取
    • /* webpackPreload: true */:预加载关键资源。
    • /* webpackPrefetch: true */:预获取未来资源。
  • 适用场景
    • 预加载:当前页面需要的关键资源。
    • 预获取:用户可能访问的下一个页面的资源。
  • 检查方法
    • 使用 Chrome DevTools 查看网络请求。
    • 查看打包生成的 HTML 文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2277558.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《汽车维护与修理》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答&#xff1a; 问&#xff1a;《汽车维护与修理》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《汽车维护与修理》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;中国汽车维修行业协会 …

线性回归超详解

目录 一、回归问题 vs 分类问题 二、线性回归 1、一句话理解 2、数学推导 2.1 线性函数表示 2.2 损失函数 2.3 梯度下降 2.3.1 什么是梯度 2.3.2 梯度下降目标 2.3.3 过程 2.3.4 迭代公式 3、特征预处理 3.1 为什么要预处理 3.2 数据归一化方法 1&#xff09;最小…

《无锡布里渊分布式光纤传感技术:照亮能源领域新征程》

在全球能源格局加速变革、能源需求持续攀升的当下&#xff0c;保障能源系统的安全、高效运行成为重中之重。分布式光纤传感技术宛如一颗璀璨的科技新星&#xff0c;正以前所未有的姿态融入能源领域&#xff0c;重塑着能源开采、运输与监测的传统模式。 石油与天然气作为现代工…

win32汇编环境,窗口程序中组合框的应用举例

;运行效果 ;win32汇编环境,窗口程序中组合框的应用举例 ;比如在窗口程序中生成组合框&#xff0c;增加子项&#xff0c;删除某项&#xff0c;取得指定项内容等 ;直接抄进RadAsm可编译运行。重点部分加备注。 ;以下是ASM文件 ;>>>>>>>>>>>>…

PHP智慧小区物业管理小程序

&#x1f31f;智慧小区物业管理小程序&#xff1a;重塑社区生活&#xff0c;开启便捷高效新篇章 &#x1f31f; 智慧小区物业管理小程序是一款基于PHPUniApp精心雕琢的智慧小区物业管理小程序&#xff0c;它犹如一股清新的科技之风&#xff0c;吹进了现代智慧小区的每一个角落…

win10电脑 定时关机

win10电脑 定时关机 https://weibo.com/ttarticle/p/show?id2309405110707766296723 二、使用任务计划程序设置定时关机打开任务计划程序&#xff1a; 按下“Win S”组合键&#xff0c;打开搜索框。 在搜索框中输入“任务计划程序”&#xff0c;然后点击搜索结果中的“任务…

【数模学习笔记】插值算法和拟合算法

声明&#xff1a;以下笔记中的图片以及内容 均整理自“数学建模学习交流”清风老师的课程资料&#xff0c;仅用作学习交流使用 文章目录 插值算法定义三个类型插值举例插值多项式分段插值三角插值 一般插值多项式原理拉格朗日插值法龙格现象分段线性插值 牛顿插值法 Hermite埃尔…

​HPM6700——以太网通信lwip_udpecho_freertos_socket

1. 概述 本示例展示在FreeRTOS系统下的UDP回送通讯 PC 通过以太网发送UDP数据帧至MCU&#xff0c;MCU将接收的数据帧回发至PC 2. 硬件设置 使用USB Type-C线缆连接PC USB端口和PWR DEBUG端口 使用以太网线缆连接PC以太网端口和开发板RGMII或RMII端口 3. 工程配置 以太网端…

低代码独特架构带来的编译难点及多线程解决方案

前言 在当今软件开发领域&#xff0c;低代码平台以其快速构建应用的能力&#xff0c;吸引了众多开发者与企业的目光。然而&#xff0c;低代码平台独特的架构在带来便捷的同时&#xff0c;也给编译过程带来了一系列棘手的难点。 一&#xff0c;低代码编译的难点 &#xff08;1…

FPGA 21 ,深入理解 Verilog 中的基数,以及二进制数与十进制数之间的关系( Verilog中的基数 )

目录 前言 一. 基数基础 1.1 基数介绍 2.1 基数符号 3.1 二进制数 二. 二进制与十进制数 三. 二进制数 3.1 定义寄存器类型变量 3.2 定义线网类型变量 3.3 赋值操作 3.4 解析二进制数为十进制数 四. 代码示例 五. 注意事项 六. 更多操作 前言 在Verilog中&#…

开始使用Panuon开源界面库环境配置并手写VS2019高仿界面

1. Panuon环境配置 1.1. 通过Nuget 安装 Panuon.WPF.UI1.2. xaml引用命名空间1.3. using Panuon.WPF.UI; 2. VS2019 view 2.1. 设置窗体尺寸和title2.2. 添加静态资源 2.2.1. 什么是静态资源 2.3. 主Grid 2.3.1. 盒子模型2.3.2. 嵌套布局 3. 总结 1. Panuon环境配置 1.1. 通…

blender导出镜头动作vmd

1 选中相机 2 在相机属性中找到 MMD摄像机工具 3 在弹窗中给 烘焙动画 打勾&#xff08;图中没忘打了&#xff09;点击确定 等待烘焙完成 4 烘焙结束后选中刚刚新增的物体 5 在mmd tools中点击 动作-导出&#xff08;图中已经导出了&#xff0c;故显示灰色&#xff09;

RabbitMQ确保消息可靠性

消息丢失的可能性 支付服务先扣减余额和更新支付状态&#xff08;这俩是同步调用&#xff09;&#xff0c;然后通过RabbitMq异步调用支付服务更新订单状态。但是有些情况下&#xff0c;可能订单已经支付 &#xff0c;但是更新订单状态却失败了&#xff0c;这就出现了消息丢失。…

重生之我在21世纪学C++—string

一、string 概念 string 字符串是一种更加高级的封装&#xff0c;string 字符串中包含大量的方法&#xff0c;这些方法可以使得字符串的操作变得更加简单。如果 string 使用的好&#xff0c;慢慢你就不想使用字符数组来存放字符串了&#xff0c;因为更简单嘛。 C 将字符串直接…

day10_Structured Steaming

文章目录 Structured Steaming一、结构化流介绍&#xff08;了解&#xff09;1、有界和无界数据2、基本介绍3、使用三大步骤(掌握)4.回顾sparkSQL的词频统计案例 二、结构化流的编程模型&#xff08;掌握&#xff09;1、数据结构2、读取数据源2.1 File Source2.2 Socket Source…

x86_64搭建ARM交叉编译工具链

点击上方"蓝字"关注我们 01、下载 >>> GCC 64位交叉编译下载&#xff1a;https://releases.linaro.org/components/toolchain/binaries/latest-7/arm-linux-gnueabihf/ 喜欢那个版本自己找 02、简介 >>> 交叉编译器中“交叉”的意思就是在一个架构…

迅翼SwiftWing | ROS 固定翼开源仿真平台正式发布!

经过前期内测调试&#xff0c;ROS固定翼开源仿真平台今日正式上线&#xff01;现平台除适配PX4ROS环境外&#xff0c;也已实现APROS环境下的单机飞行控制仿真适配。欢迎大家通过文末链接查看项目地址以及具体使用手册。 1 平台简介 ROS固定翼仿真平台旨在实现固定翼无人机决策…

IOS界面传值-OC

1、页面跳转 由 ViewController 页面跳转至 NextViewController 页面 &#xff08;1&#xff09;ViewController ViewController.h #import <UIKit/UIKit.h>interface ViewController : UIViewControllerend ViewController.m #import "ViewController.h" …

用 Python 自动化处理日常任务

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…

Linux:地址空间(续)与进程控制

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《Linux&#xff1a;地址空间与进程控制》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 如果本篇文章对你有帮助&#xff0c;还请各位点点赞&#xff0…