在 Next.js 中运行 react-native-reanimated：next-example 开发、构建与 Bundle 分析实战指南

在 Next.js 中运行 react-native-reanimatednext-example 开发、构建与 Bundle 分析实战指南【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated导读react-native-reanimated 本身是面向 React Native 的动画库但在本仓库中它通过react-native-web与 Next.js 深度集成构成了一个可运行在浏览器中的 Web 动画示例应用。本文以 apps/next-example/README.md 为核心完整讲解该示例应用的开发启动、生产构建、Bundle 体积分析与关闭压缩构建等全部命令与实战用法并结合仓库内的next.config.js、babel.config.js、页面源码与 Cypress 端到端测试剖析每条命令背后的执行机制与适用场景帮助你在自己的 Next.js React Native Web 项目中复现同样的一整套工作流。一、示例应用概览Next.js 中的 Reanimated 是如何跑起来的next-example是仓库apps/目录下的一个独立 Next.js 应用应用清单见 apps/next-example/package.json它演示了 Reanimated 在 Web 平台上的能力边界。其技术栈非常明确next16.2.12Next.js 框架本体react-native0.87.0 与react-native-web0.21.2用 react-native-web 把 React Native 组件渲染到 DOMreact-native-reanimatedworkspace:*直接引用仓库内本包源码与react-native-workletsworkspace:*Reanimated 底层依赖的工作线程库expo/next-adapter6.0.0 与webpack5.105.4负责将 Expo/React Native 生态接入 Next.js 打包链路cypress15.4.0浏览器端端到端测试。应用内页面全部用react-native的组件书写再渲染为网页入口页 pages/index.js 提供到 SSG、SSR 与 e2e 测试页的导航pages/ssg.js 演示构建期静态生成页面内的withRepeat(withTiming(...))循环动画pages/ssr.js 通过getServerSideProps在服务端随机生成目标宽度并驱动动画pages/test.js 则是一个专为 Cypress e2e 准备的动画测试页。可以说这是一个专门用于验证Reanimated 在 Next.js 各渲染模式下是否正常工作的实验场。二、开发模式一条命令启动热更新开发服务器按 README 的说明开发模式只需在apps/next-example目录下执行yarn dev这条命令在 package.json 中映射为dev: next即直接调用 Next.js 的开发服务器默认监听http://localhost:3000支持热模块替换HMR。对于 Reanimated 的 Web 调试这一模式的核心价值在于即时反馈动画改动修改 pages/test.js 这类页面中的withTiming(300, { duration: 1000 })等动画参数浏览器会立即刷新便于快速调参开发期构建未压缩next开发服务器不做生产级压缩报错堆栈可读性强方便定位 worklet 序列化或样式注入问题。需要说明的是Reanimated 的 worklet 代码必须经过 Babel 插件转换才能在 Web 上运行该转换由 babel.config.js 中的react-native-worklets/plugin完成见下文配置深挖小节因此请确保该文件未被改动或移除。三、生产构建与启动验证压缩与优化的真实产物README 给出了生产环境的两步走yarn build yarn start值得注意的是这里的yarn build在 package.json 中是一个空脚本build: 真正的构建命令是build:next: next build也就是说如果你需要完整执行一次生产构建实际应运行yarn build:next yarn start其中yarn start映射为next start用于以生产模式启动已构建好的产物默认端口仍是3000。之所以区分build与build:next是因为 README 中的其他两条构建命令build:analyze、build:disable-minification都是基于next build加环境变量实现的仓库把基础构建单独命名为build:next以保持脚本语义清晰。生产构建会执行压缩、Tree Shaking 与静态优化ssg.js页面会在构建期被预渲染为静态 HTMLssr.js页面则在每次请求时由服务端渲染。执行完yarn build:next yarn start后可以打开http://localhost:3000观察 SSG/SSR 页面中PinwheelIn进场动画与withRepeat循环动画在生产模式下是否表现正常——这是验证压缩后 worklet 代码仍能正确序列化与执行的最直接手段。四、Bundle 体积分析用 Next Bundle Analyzer 定位体积瓶颈yarn build:analyze该命令对应 package.json 中的build:analyze: ANALYZE_BUNDLE1 next build它的工作机理在 next.config.js 中清晰可见const withBundleAnalyzer require(next/bundle-analyzer)({ enabled: process.env.ANALYZE_BUNDLE 1, }); module.exports withPlugins([withBundleAnalyzer, withExpo], { ... });即通过环境变量ANALYZE_BUNDLE1触发next/bundle-analyzer依赖版本见 package.json 中的next/bundle-analyzer: 15.5.4在构建完成后生成各 chunk 的可视化报告并自动在浏览器中打开。报告会按模块展示每个包尤其是react-native-reanimated、react-native-worklets、react-native-web、expo等的体积占比。实战建议分析前先运行一次yarn build:next生成基线产物再运行yarn build:analyze对比差异。若发现 Reanimated 相关包体积异常可优先检查 next.config.js 中的transpilePackages配置——该数组列出了需要被转译的包react-native-reanimated、react-native-worklets、react-native、expo这决定了哪些依赖会以源码形式进入 Webpack 打包链路直接影响最终 Bundle 构成。五、关闭压缩构建手动审查产物内容yarn build:disable-minification对应脚本build:disable-minification: DISABLE_MINIFICATION1 next build其实现位于 next.config.jsconst disableMinification process.env.DISABLE_MINIFICATION 1; webpack(config) { if (disableMinification) { config.optimization.minimizer []; } ... }当DISABLE_MINIFICATION1时构建会清空 Webpack 的optimization.minimizer即跳过代码压缩与混淆产出的 JS 文件保留原始变量名与注释。README 明确指出该模式的用途是手动审查创建的 bundle原文This is useful when you want to manually review the created bundle。典型场景包括排查压缩混淆后 worklet 函数名丢失导致的运行时异常用未压缩产物对照报错堆栈审查react-native-reanimated等包的代码是否被正确打包进 chunk检查 Tree Shaking 是否生效确认未使用的 Reanimated 模块是否被剔除。注意该命令只影响构建产物不改动应用源码审查完毕后应重新执行yarn build:next生成正式的生产构建。六、配置深挖理解命令背后的四条关键配置6.1 next.config.jsExpo 适配、转译与别名apps/next-example/next.config.js 是整个应用能否把 Reanimated 跑起来的关键const { withExpo } require(expo/next-adapter); const withPlugins require(next-compose-plugins); module.exports withPlugins([withBundleAnalyzer, withExpo], { typescript: { ignoreBuildErrors: true }, transpilePackages: [ react-native-reanimated, react-native-worklets, react-native, expo, ], turbopack: { resolveExtensions: [ .web.tsx, .web.ts, .web.jsx, .web.js, .tsx, .ts, .jsx, .js, .mjs, .cjs, .json, ], }, webpack(config) { if (disableMinification) config.optimization.minimizer []; config.resolve.alias.react require(path).resolve(__dirname, .., .., node_modules, react); return config; }, });要点解读withExpo来自expo/next-adapter负责打通 Expo/React Native 生态与 Next.js 的 Webpack 配置transpilePackages必须包含react-native-reanimated与react-native-worklets否则这两个包含 worklet 转换代码的包不会被 Babel 处理动画在 Web 上无法运行turbopack.resolveExtensions将.web.tsx/.web.js等平台后缀置于解析优先级前列保证解析到 Web 专用实现Reanimated 源码中大量使用.web.ts等平台文件可参考 packages/react-native-reanimated/src 下的平台特定实现webpack回调把react显式 alias 到仓库根node_modules下的 React避免因 monorepo 中多个 React 副本导致 hooks 状态错乱。6.2 babel.config.jsworklet 转换与平台别名apps/next-example/babel.config.js 决定了 Reanimated worklet 能否在 Web 端工作const workletsPluginOptions { strictGlobal: true }; module.exports { presets: [next/babel], plugins: [ [babel-plugin-transform-define, { __DEV__: process.env.NODE_ENV ! production }], [ module-resolver, { extensions: [.js, .jsx, .ts, .tsx], alias: { react-native: ../../node_modules/react-native-web }, }, ], [react-native-worklets/plugin, workletsPluginOptions], ], };react-native-worklets/plugin是 worklets 的 Babel 插件负责把useAnimatedStyle、useSharedValue回调中的 worklet 函数序列化为可在 UI 线程执行的代码并配合strictGlobal: true启用严格全局模式module-resolver把react-native导入重写为react-native-web这是 Web 渲染的前提配置文件里还留有一行注释提示如需让 Reanimated 支持 fast-refresh快速刷新可取消react-native-reanimated指向../../packages/react-native-reanimated/src的别名注释。6.3 _app.js 与 _document.jsWeb 渲染的启动链路pages/_document.js 遵循 react-native-web 的官方根元素设置通过AppRegistry.registerComponent(main, () Main)与AppRegistry.getApplication(main)收集 React Native 样式并注入一段全局样式让#__next填满视口高度pages/_app.js 则在客户端水合完成后设置globalThis.__NEXT_HYDRATED__ true——这个标记被 Cypress 测试用作水合完成信号。6.4 根级 expo 依赖说明示例应用的dependencies中直接包含expo: 54.0.13这是因为expo/next-adapter需要 expo 运行时环境才能正确解析其配置在自行搭建项目时若未使用 expo 全家桶可评估裁剪withExpo包装与对应依赖。七、端到端验证用 Cypress 检验动画结果README 未直接提及测试命令但 package.json 提供了两条 e2e 脚本恰好是验证上述构建流程是否成功的闭环手段e2e: start-server-and-test \next start\ http://localhost:3000 \cypress open --e2e\, e2e:headless: start-server-and-test \next start\ http://localhost:3000 \cypress run --e2e\e2e先启动生产服务器next start等待localhost:3000可访问后再打开 Cypress 交互式界面e2e:headless同样的启动流程但以无头模式运行全部测试适合 CI。测试用例定义在 cypress/e2e/simpleAnimationTest.cy.tsdescribe(Simple animation Test, () { const waitForHydration () cy.window().should(have.property, __NEXT_HYDRATED__, true); it(Visits the test page and tests component width before and after animation, () { cy.visit(http://localhost:3000); waitForHydration(); cy.contains(e2e test page).click(); cy.url().should(include, /test); waitForHydration(); cy.get([data-testidbox]).should(have.css, width, 10px); cy.contains(Start animation).click(); cy.wait(1000); cy.get([data-testidbox]).should(have.css, width, 300px); }); });它对应的页面是 pages/test.jsuseSharedValue(10)初始化为 10点击按钮后执行withTiming(300, { duration: 1000 })测试断言动画前后 box 宽度从10px变为300px——这完整验证了 worklet 在 Web 端从初始化、序列化到执行的全链路正确性。若在生产构建后运行yarn e2e:headless全部通过即证明前三节所述构建流程是健康可用的。Cypress 的基础配置见 cypress.config.js。八、命令速查与选用场景命令脚本定义作用适用场景yarn devnext启动开发服务器HMR、未压缩日常开发调试动画yarn build:nextnext build执行生产构建压缩优化生成上线产物yarn build空脚本README 中的构建占位名实际需用build:next按 README 操作时的注意点yarn startnext start以生产模式运行已构建产物验证/部署构建结果yarn build:analyzeANALYZE_BUNDLE1 next build构建后生成 Bundle 可视化报告并自动打开定位包体积瓶颈yarn build:disable-minificationDISABLE_MINIFICATION1 next build关闭压缩混淆的构建手动审查 bundle 代码yarn e2e:headlessstart-server-and-test ... cypress run --e2e生产模式下无头运行动画 e2e 测试CI 回归验证结语next-example虽小却是 Reanimated Web 能力的完整实验台yarn dev支撑日常调试yarn build:nextyarn start产出并运行生产版本yarn build:analyze与yarn build:disable-minification分别解决体积从哪来与产物里是什么两个问题而 Cypress 测试则为这一切提供了可量化的验收标准。理解每条命令在 next.config.js 与 babel.config.js 中的落点你就能把这套工作流原样迁移到自己的 Next.js react-native-web 项目中让 Reanimated 动画在 Web 端稳定、可控、可度量地运行。【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考