建网站难不难,解析网站制作,wordpress网站中英文切换,erp软件是干嘛的最近发现项目开发#xff0c;有点加载快#xff0c;有点却是卡机式#xff0c;甚至刷新导致白屏情况。于是#xff0c;我找开发和性能优化的方法#xff0c;找到下面几种。
本文将深入探讨 预获取#xff08;Prefetch#xff09;、动态导入#xff08;Dynamic Import有点加载快有点却是卡机式甚至刷新导致白屏情况。于是我找开发和性能优化的方法找到下面几种。
本文将深入探讨 预获取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 relprefetch hrefchunkB.jsrelprefetch表示这是一个预获取提示。hrefchunkB.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 ReplacementHMR是一种开发工具功能允许在代码修改后只替换发生变化的模块而无需刷新整个页面。这样可以保留应用的状态提升开发效率。
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
IIFEImmediately Invoked Function Expression是一种定义后立即执行的函数表达式。它通常用于创建一个独立的作用域避免污染全局作用域。
4.2 IIFE 的语法
(async () {await server.start();console.log(dev server 正在运行);
})();async () { ... }定义一个异步函数。()立即调用这个函数。
4.3 IIFE 的使用场景
启动开发服务器在开发工具中启动本地开发服务器时常用这种模式。初始化异步任务在需要立即执行的异步任务中如加载配置、初始化数据库连接等IIFE 是一种常见的选择。 总结
预获取Prefetch通过提前加载资源优化后续页面或功能的加载速度。动态导入Dynamic Import按需加载模块减少初始加载时间。热模块替换HMR提升开发效率快速反馈代码修改效果。IIFE适合异步初始化和避免污染全局作用域。
通过合理使用这些技术可以显著提升前端应用的性能和开发效率。希望本文对你有所帮助如果有任何问题欢迎随时讨论。
