webpack魔法注释-预获取/预加载模块

Webpack v4.6.0+ 增加了对预获取(prefetch)和预加载(preload)的支持。

在声明 import 时,使用下面这些内置指令,可以让 webpack 输出“resource hint”,来告知浏览器:

  • prefetch(预获取):将来某些导航下可能需要的资源
  • preload(预加载):当前导航下可能需要资源

下面这个预获取的简单示例中,有一个 HomePage 组件,其内部渲染一个 LoginButton 组件,然后在点击后按需加载 LoginModal 组件。

LoginButton.js

//...
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

 这会生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部,指示浏览器在闲置时间预取 login-modal-chunk.js 文件。

生成的link标签,可以看到rel为prefetch:

参考文档: 

代码分离 | webpack 中文文档 | webpack中文文档 | webpack中文网

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

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

相关文章

【JavaWeb】Web程序设计期末复习总结

试题 一. 单选题&#xff08;共24题&#xff0c;24分&#xff09; 二. 多选题&#xff08;共16题&#xff0c;32分&#xff09; 三. 填空题&#xff08;共20题&#xff0c;10分&#xff09; 四. 判断题&#xff08;共30题&#xff0c;15分&#xff09; 五. 论述题&#xf…

基于TOGAF和WAF的企业级架构

TOGAF是技术无关的企业级架构框架&#xff0c;WAF则侧重于云的最佳实践和指导方针&#xff0c;本文介绍了两者的异同。原文: Enterprise Architecture with TOGAF and Well-Architected Frameworks (AWS, Azure and Google) 简介 本文旨在解释TOGAF和云架构框架/良好架构框架(W…

IaC基础设施即代码:使用Terraform 连接 alicloud阿里云

目录 一、实验 1.环境 2.alicloud阿里云创建用户 3.Linux使用Terraform 连接 alicloud 4.Windows使用Terraform 连接 alicloud 二、问题 1.Windows如何申明RAM 相关变量 2.Linux如何申明RAM 相关变量 3. Linux terraform 初始化失败 4.Linux terraform 计划与预览失败…

【LeetCode: 57. 插入区间+分类讨论+模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

blender 导入到 Marvelous Designer

1&#xff09; 将模型的所有部分合并为一个单独的mesh 2&#xff09; 先调整计量单位&#xff1a; 3&#xff09;等比缩放&#xff0c;身高调整到180cm左右 4&#xff09;应用当前scale 首先&#xff0c;选中你要修改的物体&#xff0c;然后按下Ctrl-A键&#xff0c;打开应用…

CSAPP - bomblab 作弊方式2: gdb jump 命令, 以及修改 jne 为 nop 指令

CSAPP - bomblab 作弊方式2&#xff1a; gdb jump 命令&#xff0c; 以及修改 jne 为 nop 指令 厌倦了在 gdb 中一步步顺序执行 bomb 可执行程序。为什么不能自行控制程序的执行呢&#xff1f;跳到特定的函数去执行&#xff0c;又或者把原本要执行的指令改掉&#xff0c;gdb 里…

【Machine Learning】Other Stuff

本笔记基于清华大学《机器学习》的课程讲义中有关机器学习的此前未提到的部分&#xff0c;基本为笔者在考试前一两天所作的Cheat Sheet。内容较多&#xff0c;并不详细&#xff0c;主要作为复习和记忆的资料。 Robust Machine Learning Attack: PGD max ⁡ δ ∈ Δ L o s s (…

linux环境下安装postgresql

PostgreSQL: Linux downloads (Red Hat family)postgresql官网 PostgreSQL: Linux downloads (Red Hat family) 环境&#xff1a; centos7 postgresql14 选择版本 执行启动命令 配置远程连接文件 vi /var/lib/pqsql/14/data/postgresql.conf 这里将listen_addresses值由lo…

力扣399. 除法求值

广度优先搜索 思路&#xff1a; 题目梳理 输入信息里包含 A / B val&#xff1b;输入一堆 A / B 需要求出它们的比值&#xff1b;以操作数为节点&#xff0c;构建权重图&#xff0c;节点对应了关联节点及其比值&#xff1b;可以进行简单的处理&#xff0c;将代数变量映射为整…

【位运算】【二分查找】【C++算法】100160价值和小于等于 K 的最大数字

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 二分查找算法合集 位运算 LeetCode100160. 价值和小于等于 K 的最大数字 给你一个整数 k 和一个整数 x 。 令 s 为整数 num 的下标从1 开始的二进制表示。我们说一个整数 num 的 价值 是满足 i % x 0 且…

数据分析---SQL(3)

目录 IF和CASE WHEN的区别IF函数示例CASE WHEN示例如何求字段整体的标准差和均值什么是笛卡尔积笛卡尔积通常的使用场景是什么rank、dense rank、row number的区别rank函数示例dense rank函数示例row number函数示例什么是窗口函数除了rank之外还有哪些窗口函数IF和CASE WHEN的…

阿里云ingress配置时间超时的参数

一、背景 在使用阿里云k8s集群的时候&#xff0c;内网API网关&#xff0c;刚开始是用的是Nginx&#xff0c;后面又搭建了ingress。 区别于nginx配置&#xff0c;ingress又该怎么设置参数呢&#xff1f;比如http超时时间等等。 本文会先梳理nginx是如何配置&#xff0c;再对比…

优雅的删除链表元

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 在数据结构&#xff1a;链表中&#xff0c;我们实现了链表的删除方法&#xff0c;但代码看起来并不“优雅”&#xff0c;那么今天我们就来尝试使用多种方法&#xff0c…

Halcon 3D相关算子(二)

(1) moments_object_model_3d( : : ObjectModel3D, MomentsToCalculate : Moments) 功能&#xff1a;计算3D对象模型的平均值或中心二阶矩。要计算3D物体模型点的平均值&#xff0c;在MomentsToCalculate中选择mean_points&#xff1b;如果要计算二阶中心矩&#xff0c;则选择…

windows安装conda环境,开发openai应用准备,运行第一个ai程序

文章目录 前言一、windows创建openai开发环境二、国内代理方式访问openai的方法&#xff08;简单方法&#xff09;三、测试运行第一个openai程序总结 前言 作者开发第一个openai应用的环境准备、第一个openai程序调用成功&#xff0c;做个记录&#xff0c;希望帮助新来的你。 …

如何处理Uniapp中的异步请求?

在Uniapp中处理异步请求有以下几种方法&#xff1a; 使用 uni.request 方法发送异步请求&#xff0c;该方法返回一个 Promise 对象&#xff0c;可以使用 then 方法处理请求成功的回调&#xff0c;使用 catch 方法处理请求失败的回调。 uni.request({url: http://api.example.…

鸿蒙系统ArkTs语法入门

鸿蒙系统ArkTs的ts语法入门 前言1. 变量声明2. 数据类型2.1 基本数据类型2.2 复杂数据类型2.3 联合类型2.4 空类型和未定义类型 3. 函数3.1 匿名函数和箭头函数 4. 类和接口类的访问权限接口类的继承内部类 7. 结构体参考材料 前言 每个语言都有控制流语句就不写测试代码了。a…

31 树的存储结构一

无法直接用数组表示树的逻辑结构&#xff0c;但是可以设计结构体数组对节点间的关系进行描述&#xff1a;【如表】 这样做的问题&#xff1a; 可以利用 组织链表 parent指针&#xff1a; 注意&#xff1a;树结点在 组织链表 中的位置不代表树的任何逻辑关系 树的架构图&#xf…

从0开始学Git指令(3)

从0开始学Git指令 因为网上的git文章优劣难评&#xff0c;大部分没有实操展示&#xff0c;所以打算自己从头整理一份完整的git实战教程&#xff0c;希望对大家能够起到帮助&#xff01; 远程仓库 Git是分布式版本控制系统&#xff0c;同一个Git仓库&#xff0c;可以分布到不…

ubuntu主机开启ssh服务,ubuntu通过ssh访问主机

1.ubuntu通过ssh访问主机 要在Ubuntu上通过SSH&#xff08;Secure Shell&#xff09;访问另一台主机&#xff0c;您需要确保几件事情&#xff1a; 目标主机上的SSH服务器&#xff1a;确保您要访问的主机上安装并运行了SSH服务器&#xff08;例如OpenSSH服务器&#xff09;。 …