Tamagui 如何用 CLI 优化 Next.js 生产构建？

Tamagui 如何用 CLI 优化 Next.js 生产构建【免费下载链接】tamaguiStyle React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.项目地址: https://gitcode.com/GitHub_Trending/ta/tamagui如果你有一个已经在跑的 Next.js Tamagui 项目开发模式下Turbopack 是 Next.js 的默认 bundlerdev 模式下 Tamagui 不做任何额外配置就能工作一切正常但生产构建还没有接入 Tamagui 编译器那么目标就很明确用tamagui/cli在next build之前就地预编译组件生成构建期主题 CSS并让 CI 能验证优化真的发生了。适用前提均来自文档Next.js 使用 Turbopack当前默认如果是旧版 Webpack 的 Next.js文档建议改用tamagui/next-plugin不走本文的 CLI 路径项目里已有tamagui.config.tscreateTamagui的默认配置导出CLI 就地编译方案面向生产构建文档明确说它应在部署管线中运行不要在开发时跑因为它会重写源文件。安装 CLI把 CLI 装为开发依赖yarn add -D tamagui/cli创建 tamagui.build.ts在项目根目录创建tamagui.build.ts作为编译器配置的唯一来源。所有 bundler 插件和 CLI 都会自动读取这个文件避免把选项复制到各处import type { TamaguiBuildOptions } from tamagui/core export default { components: [tamagui/core], // or [tamagui] config: ./tamagui.config.ts, outputCSS: ./public/tamagui.generated.css, } satisfies TamaguiBuildOptions字段含义来自文档的属性表components包含你要优化的 Tamagui 组件的 npm 模块数组例如用基础组件时填[tamagui]config指向tamagui.config.ts的相对路径该文件需默认导出createTamagui的结果outputCSS提取后的 CSS 输出路径。设置它后编译器会自动设置TAMAGUI_DID_OUTPUT_CSS把运行时 CSS 生成代码从 bundle 中 tree-shake 掉文档给出的收益约 6KB gzipped。另外编译器会把构建后的组件和配置生成到.tamagui目录文档建议把该目录加进.gitignore。配置 next.config.tsNext.jsTurbopack 路径还需要在next.config.ts里补充解析配置import type { NextConfig } from next const nextConfig: NextConfig { // some Tamagui packages may need transpiling transpilePackages: [tamagui/lucide-icons-2], experimental: { turbo: { resolveAlias: { react-native: react-native-web, react-native-svg: tamagui/react-native-svg, }, }, }, } export default nextConfigtranspilePackages里具体放什么取决于你用了哪些 Tamagui 包。文档的排查建议是如果看到模块解析错误module resolution errors把出问题的包加进这个数组再试。用--包裹构建命令在package.json中把构建脚本改为让 CLI 包裹next build{ scripts: { dev: next dev --turbopack, build: tamagui build --target web ./src -- next build } }--分隔符的作用CLI 先对./src下的文件做优化然后执行next build构建结束后自动恢复源文件。这是文档推荐的默认方式。注意就地编译的副作用执行前要有预期没有--包裹时比如tamagui build --target web ./src next build文件被就地修改且不会恢复。文档说这种写法只适合文件反正会被丢弃的 CI 环境--target web指定只优化 web 平台--target可取web、native、both默认bothNext.js web 项目应显式写web也可以用--include/--excludeglob 缩小范围例如tamagui build --target web --include src/components/**/*.tsx --exclude src/components/**/*.test.tsx ./src -- next build不想改动源文件的替代路径是--outputtamagui build --target web --output ./dist ./src next build优化结果按目录结构写入./dist源文件始终不被修改也不需要恢复步骤。想先看看会改什么、不实际写文件可以用--dry-runnpx tamagui build --dry-run ./src生成并接入主题 CSSCLI 会把主题 CSS 写到tamagui.build.ts里配置的outputCSS。运行一次npx tamagui build生成初始 CSS 文件然后把文件提交进 git并在 layout 中引入import ../public/tamagui.generated.css import { TamaguiProvider } from tamagui/core import config from ../tamagui.config export default function RootLayout({ children }: { children: React.ReactNode }) { return ( html langen body TamaguiProvider config{config}{children}/TamaguiProvider /body /html ) }文档补充React 19 下 Tamagui 会自动通过 style 标签注入运行时样式outputCSS文件只负责构建期生成的主题和 token。如果后续只想重新生成 CSS 而不跑完整构建可以用npx tamagui generate-css默认输出tamagui.generated.css可用--output path指定路径。验证构建结果CI 里用--expect-optimizations防止配置悄悄失效{ build: tamagui build --target web --expect-optimizations 5 ./src -- next build }当编译器优化的组件数少于给定值时构建会失败错误信息里会显示实际数量。文档说这能帮你抓到三类配置问题components数组配错、源路径写错、配置文件没被找到。数字本身按你自己项目的实际组件量设定即可这里只是文档示例。文档还给出了一个更完整的管线示例先用tamagui check检查依赖版本一致性在 monorepo 里尤其有用再进入构建{ scripts: { build: tamagui check tamagui build --target web ./src -- next build } }常见问题构建报 cannot find module检查tamagui.build.ts里的config字段是否指向了正确的tamagui.config.ts路径Next 构建出现模块解析错误通常是某个 Tamagui 包没被转译把它加进next.config.ts的transpilePackages不确定 CLI 会动哪些文件先跑npx tamagui build --dry-run ./src预览不写任何文件。限制与边界就地编译会重写工作目录里的文件只应放在生产/部署管线本地开发保持next dev --turbopack原样运行CLI 路径没有 bundler 插件提供的开发期能力dev 调试、data-属性等这是文档明确列出的取舍如果你的 Next.js 仍走 Webpack旧版本tamagui/next-plugin是文档给出的替代方案配置方式见 Next.js 指南的 For Older Versions 一节本文的 CLI 步骤不适用。更多 CLI 命令generate、generate-themes、平台特定文件处理规则等可在 CLI 文档 和 编译器安装指南 中继续查看。【免费下载链接】tamaguiStyle React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.项目地址: https://gitcode.com/GitHub_Trending/ta/tamagui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考