motion-anything 动效库的模块化引入策略

处理「motion-anything 动效库」这类非核心生态库时，模块化引入的核心不是抄一段 import 代码，而是先确认库本身是否支持按需打包，再决定用全量、具名导入还是手动分包。建议先在你自己的构建环境里验证实际产物，因为不同版本、不同打包器对 tree-shaking 的支持差异很大。下面给的是通用判断流程和可复制的引入骨架，适合作为接入时的操作基准。

建议不要把“按需引入”直接等同于写 `import { xxx } from 'motion-anything'`。先查三件事：库的 package.json 里 exports 字段、是否带 ESM 产物、能否配合打包器做 tree-shaking。如果库本身不支持，就要考虑用 CDN 外链或单独打包到公共 chunk。验证方式以构建产物体积和实际运行动效为准，不要只看文档示例。

先确认库的模块形态，再谈引入方案

很多动效库同时发布 CommonJS 和 ESM 两份产物，但入口字段不同。建议在安装后用 Node 或编辑器直接读一下 `node_modules/motion-anything/package.json`，重点看 `main`、`module`、`exports` 三个字段。如果只有 `main` 指向 `.cjs`，则打包器无法做 tree-shaking；如果 `exports` 里有条件导出，`import` 条件通常指向 `.js`，那么现代打包器会优先使用 ESM。

更简单的确认方式，是在项目里写一行 `import { 某效果 } from 'motion-anything'`，然后看打包产物里是否还保留了未使用的部分。不要依赖“库支持按需”的直觉判断。

通用按需引入骨架

假设库包装成具名导出，推荐这样写：

// 通用骨架，需根据库实际导出名调整
import { motion, useAnimation } from 'motion-anything';

export default function Demo() {
  const controls = useAnimation();
  return <div onClick={() => controls.start({ scale: 1.2 })}>点我</div>;
}

这个骨架只引入 `motion` 组件和 `useAnimation` 方法。如果你的项目里只用三四类效果，尽量只引入对应函数。若库没有具名导出，只提供默认导出 `MotionAnything`，则建议换一种思路：在页面对应模块里先 `import MotionAnything from 'motion-anything'`，再用 `const { specificEffect } = MotionAnything` 解构，最后用打包器的 analyze 工具看有没有生效。不管哪种写法，最终都要跑一次构建看体积。

配合打包器做分包与动态加载

单纯从库入口按具名导入还不够，因为动效库可能内部依赖大量工具函数。更稳的做法分两层：

如果库支持 ESM 且没有副作用，优先用具名导入，让打包器自动 tree-shake。
如果库体积仍偏大，把整库放进一个独立 chunk，让首屏不加载。比如在路由级用 `() => import('motion-anything')`，需要时才拉取对应动效代码。

// 动态加载示例，配合 React.lazy 或 Vue defineAsyncComponent
const MotionButton = defineAsyncComponent(() =
  import('motion-anything').then(m => m.default)
);

注意：动态加载会推迟动效初始化的时机，如果动画出现在首屏，需要评估闪烁风险。建议只有动画出现在弹窗、滚动到视口、或用户点击后才触发时，才用动态加载。

构建验证清单

安装依赖后检查 `package.json` 的 `module`/`exports` 字段。
用 `import * as pkg from 'motion-anything'` 打印一下实际导出的键名，确认没有拼写错误。
执行生产构建，打开打包分析报告（Webpack Bundle Analyzer / Vite Rollup Visualizer），对比不同引入方案下的库体积。
在浏览器 Network 里过滤 `motion-anything`，看它是否在首屏请求中出现。如果出现，则可能存在全局导入或副作用代码。
切换路由或点击触发后，确认动效行为与原全量引入一致，没有抖动或控制函数丢失。

常见问题

为什么按需引入后构建体积没变小？

通常是因为库本身没有副作用标记或打包器认为导出有副作用。可以检查 `sideEffects` 字段，或在打包器里把该库标记为 `sideEffects: false`（仅在你确认库没有顶层副作用时）。另外，如果库的入口本身是聚合文件，也会导致 tree-shaking 失效。

动态加载动效库会不会影响动画性能？

影响在于动画启动时多了一次网络请求。如果是本地打包后的 chunk，加载很快；但首帧动画若依赖这个 chunk，会出现延迟。建议把动画初始化放在请求完成后的回调里，或提前在空闲时预加载该 chunk。

多个页面都用同一套动效，要不要抽公共模块？

要，但别把整个库抽进去。可以抽一个 `motion-presets.js`，只导出你项目常用的 2-3 个效果函数。这样既避免重复打包，又保留了后续替换库的灵活性。