🚨【关注】专题，快人一步了解本专题最新内容 👉一键关注👈

本文收录于【技术新风向】专题，了解专题中更多精彩内容，欢迎点击了解>>

开发者朋友们，你们是否有被以下这些情况困扰🤔️

✖️保存代码后等待耗时长 ✖️在子页面修改内容后丢失页面栈 ✖️小程序加载完成后丢失输入框内容

今天给大家介绍一个小程序开发利器，轻松帮助大家解决上述问题！那就是——小程序代码「热重载」✨

在开发者工具开启「热重载」后，当你修改页面代码文件，模拟器可以在不刷新的情况下生效代码变更，开发体验和开发效率up up⬆️

热重载都有哪些优点？

❌无热重载场景

在无热重载的情况下，小程序从编写代码到展示效果需要经历较长的流程，流程如下：

在这一过程中，你可能会遇到以下几个问题：

1. 编译等待耗时长。保存代码后等待加载耗时长，如果小程序越复杂，其编译等待耗时越长，严重影响开发效率。
2. 丢失页面栈。当在子页面修改内容时，小程序加载完成后会跳转到初始入口页，不会保留当前页面栈。
3. 丢失页面状态。如果页面存在输入框，小程序加载完成以后页面数据初始化，丢失输入框内容。

别担心！这些问题在开启「热重载」模式后都能够迎刃而解🤩

✅使用热重载

有了热重载后，能够有效解决无热重载存在的问题。

当开启「热重载」模式，修改页面中的 ttml/ttss/js/sjs 文件后，模拟器将在不刷新页面的情况下，更新预览效果，同时保存了当前编辑页面的状态数据。小程序从编写代码到展示效果流程大大缩短，流程如下：

如何开启热重载？

💡版本支持：开发者工具 从 4.1.4 起支持该功能；至少使用 2.98.0.0 及以上的基础库版本。

开发者朋友们可以选择以下任意一种方法开启热重载功能：

🔹方法一：通过详情页工程配置模块「开启热重载」设置开启和关闭

🔹方法二：直接在 project.config.json中修改 compileHotReload 改为 true 或 false 设置开闭

⚠️：开启热重载必须同时开启「修改文件的时候自动编译」，否则无法生效

热重载执行逻辑

当开启「热重载」模式时，编译会根据不同代码修改情况进行不同程度模拟器更新：

Tips

热重载仅支持小程序，不支持小游戏与小玩法。同时由于三方框架 taro 或 uniapp 均使用 Webpack 打包，产物存在模块缓存，当前不支持热重载，后续会逐步支持。

更多能力介绍可参考：代码热重载