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

2024-01-10 16:13:06

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中文网

文章来源:https://blog.csdn.net/bitcser/article/details/135505166
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。