最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。
本文将深入探讨 预获取（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 动态导入的两种导出方式
-
默认导出（
export default）：- 模块对象会包含一个
default属性，指向默认导出的值。 - 访问默认导出值时，需要通过
module.default。
- 模块对象会包含一个
-
命名导出（
export const foo = 1）：- 模块对象会直接包含命名导出的属性。
示例代码
假设有一个模块 myModule.js：
// myModule.js
const foo = 'Hello, World!';
export default foo;
在另一个文件中动态导入该模块：
import('./myModule.js')
.then(module => {
// 注意：默认导出值需要通过 module.default 访问
console.log(module.default); // 输出: Hello, World!
})
.catch(error => {
console.error('模块加载失败:', error);
});
2.3 动态导入的优势
- 按需加载：只在需要时加载模块，减少初始加载时间。
- 代码分割：结合 Webpack 等工具，可以实现代码分割，优化性能。
3. 热模块替换（HMR）：提升开发效率
3.1 什么是 HMR？
热模块替换（Hot Module Replacement，HMR）是一种开发工具功能，允许在代码修改后，只替换发生变化的模块，而无需刷新整个页面。这样可以保留应用的状态，提升开发效率。
3.2 HMR 的工作原理
- 监听文件变化：开发工具（如 Webpack）会监听项目文件的变化。
- 推送更新：当文件被修改时，开发工具会将变化的模块推送到浏览器。
- 替换模块：浏览器接收到更新后，用新的模块替换旧的模块。
- 执行回调：如果模块定义了 HMR 相关的回调（如
module.hot.accept），则会执行这些回调以处理更新逻辑。
3.3 配置 HMR（以 Webpack 为例）
1. 启用 HMR
在 webpack.config.js 中启用 HMR：
const webpack = require('webpack');
module.exports = {
// 其他配置...
devServer: {
hot: true, // 启用 HMR
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // 添加 HMR 插件
],
};
2. 在代码中处理 HMR
在入口文件中添加 HMR 的逻辑：
if (module.hot) {
module.hot.accept('./App', () => {
// 当 App 模块更新时，执行此回调
render(<App />, document.getElementById('root'));
});
}
3.4 HMR 的优势
- 快速反馈：开发者可以立即看到代码修改的效果。
- 保持状态：应用的状态不会丢失，提升调试效率。
- 提高开发效率：减少重复操作（如重新输入表单数据、重新导航到某个页面等）。
4. 立即执行函数表达式（IIFE）：异步初始化
4.1 什么是 IIFE？
IIFE（Immediately Invoked Function Expression）是一种定义后立即执行的函数表达式。它通常用于创建一个独立的作用域，避免污染全局作用域。
4.2 IIFE 的语法
(async () => {
await server.start();
console.log('dev server 正在运行');
})();
async () => { ... }：定义一个异步函数。()：立即调用这个函数。
4.3 IIFE 的使用场景
- 启动开发服务器：在开发工具中，启动本地开发服务器时常用这种模式。
- 初始化异步任务：在需要立即执行的异步任务中（如加载配置、初始化数据库连接等），IIFE 是一种常见的选择。
总结
- 预获取（Prefetch）：通过提前加载资源，优化后续页面或功能的加载速度。
- 动态导入（Dynamic Import）：按需加载模块，减少初始加载时间。
- 热模块替换（HMR）：提升开发效率，快速反馈代码修改效果。
- IIFE：适合异步初始化和避免污染全局作用域。
通过合理使用这些技术，可以显著提升前端应用的性能和开发效率。希望本文对你有所帮助！如果有任何问题，欢迎随时讨论。
