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.hqwc.cn/news/336901.html

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

相关文章

ABAP 工单状态读取

CDS代码 CDS代码如下&#xff0c;可自行转换成OPEN SQL代码 AbapCatalog.sqlViewName: ZPPV024 AbapCatalog.compiler.compareFilter: true AbapCatalog.preserveKey: true AccessControl.authorizationCheck: #NOT_REQUIRED EndUserText.label: 读取生产工单状态 define vie…

【音视频】海康的音频没有的问题

目录 海康的错误 参考文章 海康的错误 参考文章 PS流详解&#xff08;载荷H264&#xff09;-CSDN博客 海康摄像头PS流格式解析&#xff08;RTP/PS/H264&#xff09; RTP协议全解析&#xff08;H264码流和PS流&#xff09;-CSDN博客

鸿蒙开发已解决-Failed to connect to gitee.com port 443: Time out 连接超时提示

文章目录 项目场景:问题描述原因分析:解决方案:解决方案1解决方案2:解决方案3:此Bug解决方案总结解决方案总结**心得体会:解决连接超时问题的三种方案**项目场景: 导入Sample时遇到导入失败的情况,并提示“Failed to connect to gitee.com port 443: Time out”连接超…

C++上位软件通过Snap7开源库访问西门子S7-200/LOGO PLC/合信M226ES PLC V存储区的方法

前言 在前面例程中谈到了C 通过Snap7开源库S7通信库跟西门子S7-1200PLC/S7-1500PLC以及合信CTMC M226ES PLC/CPU226 PLC通信的方式方法和应用例程。但是遗憾的是Snap7中根据官方资料显示只能访问PLC的 DB区、MB区、C区、T区 、I区、Q区&#xff0c;并没有提到有关如何访问S7-20…

C++:多态|虚函数、虚表底层原理|多态原理

C&#xff1a;多态|虚函数、虚表底层原理|多态原理 前言一、多态的概念二、多态的定义及实现2.1 多态的构成条件2. 2 虚函数2.3 虚函数的重写2.3.1 虚函数重写的例外1&#xff1a;协变(基类与派生类虚函数返回值类型不同)2.3.2 虚函数重写的例外2&#xff1a;析构函数的重写(基…

Elasticsearch windows开箱即用【记录】

一、准备工作 安装ES之前要在本机安装好JDK&#xff0c;对应的兼容性见官网链接&#xff1a;https://www.elastic.co/cn/support/matrix ES官网链接&#xff1a;https://www.elastic.co/cn/, 我本机安装的是JDK8&#xff0c;测试使用的是7.3.0版本的ES和Kibana。 1、首先去…

CMake入门教程【核心篇】设置和使用缓存变量

😈「CSDN主页」:传送门 😈「Bilibil首页」:传送门 😈「动动你的小手」:点赞👍收藏⭐️评论📝 文章目录 概述设置缓存变量使用缓存变量更改缓存变量完整代码示例实战使用技巧注意事项总结与分析

基于宝塔搭建Discuz!论坛

一、安装宝塔 我是在我的虚拟机上安装图的宝塔 虚拟机版本&#xff1a;Ubuntu 18.04 wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh 6dca892c安装完成之后在浏览器输入你的地址 https://你的域名&#xff08;或…

sql将查询出的数值变为中文

在开发中通常会遇到的情况就是&#xff0c;用户的性别在数据库中不是以中文字符“男&#xff0c;女”来表示的&#xff0c;而是使用数字 1 0 来表示。但是显示到界面的时候&#xff0c;如果显示 1 0 用户也不明白是什么意思&#xff0c;就需要将其转为原有的意思。当然方法…

Vue-10、Vue键盘事件

1、vue中常见的按键别名 回车 ---------enter <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>键盘事件</title><!--引入vue--><script type"text/javascript" src"h…

Sui 2024 Space首秀精彩集锦

1月5日&#xff0c;Sui Network官方在X平台进行了名为《Looking Ahead: What’s in Store for 2024》的2024 Space首秀&#xff0c;Mysten Labs联合创始人兼首席产品官Adeniyi Abiodun和首席技术官Sam Blackshear&#xff0c;与全球Sui支持者一起探讨Sui网络的2024发展大计&…

HarmonyOS应用开发学习笔记 应用上下文Context 获取文件夹路径

1、 HarmoryOS Ability页面的生命周期 2、 Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 Styles装饰器&#xff1a;定义组件重用样式 Extend装饰器&#xff1a;定义扩展组件样式 5、HarmonyOS 应用开发…