前端性能优化：HMR热更新和预获取加载

最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。

本文将深入探讨 预获取（Prefetch）、动态导入（Dynamic Import） 和 热模块替换（HMR） 这三个关键技术

1. 预获取（Prefetch）：加速后续页面加载

1.1 什么是预获取？

预获取（Prefetch）是一种性能优化技术，允许浏览器在空闲时提前加载后续页面或功能所需的资源（如 JavaScript 文件）。通过预获取，可以减少用户后续操作的等待时间，提升用户体验。

1.2 Webpack 中的预获取

在 Webpack 打包的应用中，当父 chunk（即当前页面或功能所需的代码块）加载完成后，Webpack 会自动为子 chunk 添加预获取提示（prefetch hint）。浏览器会根据这些提示，在空闲时提前加载子 chunk。

示例场景

假设有一个页面 A，加载了父 chunk A。页面 A 中有一个按钮，点击后会加载页面 B（对应子 chunk B）。Webpack 会在父 chunk A 加载完成后，自动添加如下代码：

<link rel="prefetch" href="chunkB.js">

• rel="prefetch"：表示这是一个预获取提示。
• href="chunkB.js"：指定需要预获取的资源路径。

预获取的优势

• 减少延迟：提前加载资源，用户点击按钮时页面 B 的加载速度更快。
• 提升用户体验：用户感知不到资源加载的等待时间。

---

2. 动态导入（Dynamic Import）：按需加载模块

2.1 什么是动态导入？

动态导入是 ES6 提供的一种语法，允许在运行时异步加载模块。它返回一个 Promise，当模块加载完成后，Promise 会被解析为模块对象。

2.2 动态导入的两种导出方式

1. 默认导出（export default）：

   • 模块对象会包含一个 default 属性，指向默认导出的值。
   • 访问默认导出值时，需要通过 module.default。