Taro2 升级 Taro3踩坑之旅：开发者自救指南

Taro 是一个优秀的跨平台开发框架，但随着业务代码不断迭代，Taro2 固有的问题日益凸显，如：

• 代码体积不断臃肿，导致开发体验变差；
• Taro2 仅支持 webpack 3，无法使用最新的 webpack 特性；
• Taro2 缺乏对新特性的支持，如 CSS Modules；
• Taro2 官方对于 Taro2 除了重大 bug 已不再维护；

因此，我们决定将 Taro2 升级到 Taro3。Taro3 是 Taro2 的全新版本，解决了上述 Taro2 的问题，并且提供了许多新特性，如：

• 支持 webpack 4 和 5；
• 支持 CSS Modules；
• 支持 TypeScript；
• 支持 React Hooks；
• 支持按需加载；
• 支持服务端渲染；

我们对 Taro2 进行升级到 Taro3 的过程还算顺利，但过程中也踩了一些坑。下面，我们将分享这些踩坑经验，希望能帮助开发者避免这些问题，更轻松地完成升级。

1. Taro3 与 Taro2 的兼容性

Taro3 与 Taro2 的兼容性不是很好，一些 Taro2 的特性在 Taro3 中被废弃了，一些 Taro2 的 API 在 Taro3 中发生了变化。因此，在升级 Taro2 到 Taro3 时，需要对代码进行一些修改。

2. Taro3 的按需加载

Taro3 引入按需加载功能，可以极大优化小程序的体积，提升小程序的加载速度。但按需加载也有一些坑点，如：

• 按需加载的组件无法在模板中直接使用，需要使用 import() 动态加载；
• 按需加载的组件无法使用 ref；
• 按需加载的组件无法使用 forwardRef；
• 按需加载的组件无法使用 memo；
• 按需加载的组件无法使用 useCallback 和 useMemo；

3. Taro3 的服务端渲染

Taro3 支持服务端渲染，可以提高小程序的首次加载速度。但服务端渲染也有一些坑点，如：

• 服务端渲染需要 Node.js 环境，这可能会对服务器资源造成一定的压力；
• 服务端渲染需要对代码进行一些修改，如：
  • 需要将 import 语句改为 require 语句；
  • 需要将 export default 语句改为 module.exports = 语句；
• 服务端渲染对 SEO 不友好，因为服务端渲染生成的 HTML 代码中不包含任何 JavaScript 代码，这可能会导致搜索引擎无法抓取小程序的页面内容；

4. Taro3 的其他坑点

Taro3 还有一些其他坑点，如：

• Taro3 不支持对 wx. 前缀的 API 进行混淆；
• Taro3 不支持对 import 语句进行混淆；
• Taro3 不支持对 export 语句进行混淆；
• Taro3 不支持对 class 语句进行混淆；
• Taro3 不支持对 function 语句进行混淆；

5. 总结

总之，Taro2 升级到 Taro3 的过程还算顺利，但过程中也踩了一些坑。以上列举的踩坑经验，希望能帮助开发者避免这些问题，更轻松地完成升级。