减小捆绑包大小

出色的 Web 体验不仅外观精美、动效流畅，还应加载迅速。

当使用类似以下的捆绑包分析网站测量 Motion for React 的 gzipped 和压缩后的大小时Bundlephobia，您可能会看到像 50kb 或更大的数字！

这是具有误导性的。Motion for React 导出了许多函数，其中大多数您不会导入。像以下的 JavaScript 打包器Rollup和Webpack都能够进行“tree shaking”，这意味着只有您导入的代码会被发送给用户。

您可能只会使用 Motion for React 中的一个很小的钩子函数，例如 useReducedMotion。在这种情况下，大小会更接近 1kb。

然而，Motion for React 的主要动画 API 是 useAnimate 和 motion。大多数开发者在使用 Motion 时会选择至少使用其中一个，所以让我们看看如何尽可能地减小它们的大小。

useAnimate

useAnimate 是 Motion for React 的动画函数，用于手动触发和控制动画。

它有两种大小，mini (2.3kb) 和 hybrid (17kb)。

mini 版本专门使用 WAAPI 进行硬件加速动画，而 hybrid 版本还可以为序列、motion values、独立变换以及更多内容制作动画。

在 2.3kb 的大小下，useAnimate mini 是 React 可用的最小动画库。

motion

The motion组件是 Motion for React 最常用的动画 API。

由于其声明式的、props 驱动的 API，打包器无法将其 tree shaking 到小于 34kb。

然而，通过使用them和LazyMotion组件，您可以显著减小其大小，在首次渲染时仅略低于 6kb。

然后，通过懒加载，您可以将动画和交互的加载延迟到站点渲染之后。

注意： 本指南中引用的所有大小均来自 Rollup 生成的捆绑包。Webpack 在 tree-shaking 方面的效率较低，应生成稍大的捆绑包。

减小大小

不要导入 motion，而是导入更精简的 m 组件。

import * as m from "motion/react-m"

m 的使用方式与 motion 完全相同，但与 motion 不同，m 组件没有预加载动画、布局动画或拖动手势等功能。

相反，我们通过 LazyMotion 组件手动加载这些功能。这使您可以选择加载哪些功能，以及是将它们作为主捆绑包的一部分加载还是懒加载它们。

import { LazyMotion, domAnimation } from "motion/react"

// Load only the domAnimation package
function App({ children }) {
  return (
    <LazyMotion features={domAnimation}>
      {children}
    </LazyMotion>
  )
}

可用功能

目前有两个您可以加载的 功能包

• domAnimation：这提供了对动画、变体、退出动画和点击/悬停/焦点手势的支持。（+15kb）

• domMax：这提供了对上述所有内容的支持，外加平移/拖动手势和布局动画。（+25kb）

未来可能会提供更细粒度的功能包，但目前选择这些功能包是为了减少功能之间的重复量，这最终可能会导致下载更多数据。

同步加载

通过将这些功能包之一传递给 LazyMotion，它们将被捆绑到您的主 JavaScript 捆绑包中。

import { LazyMotion, domAnimation } from "motion/react"

function App({ children }) {
  return (
    <LazyMotion features={domAnimation}>
      {children}
    </LazyMotion>
  )
}

懒加载

如果您使用的是像 Webpack 或 Rollup 这样的打包器，我们可以将动态导入函数传递给 features，它将在我们执行初始渲染后才获取功能。

首先，创建一个文件，该文件仅导出您要加载的功能。

// features.js
import { domMax } from "motion/react"
export default domMax

然后，将一个函数传递给 features，该函数将动态加载该文件。

import { LazyMotion } from "motion/react"
import * as m from "motion/react-m"

// Make sure to return the specific export containing the feature bundle.
const loadFeatures = () =>
  import("./features.js").then(res => res.default)

// This animation will run when loadFeatures resolves.
function App() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
    </LazyMotion>
  )
}

严格模式

由于普通的 motion 组件仍然预加载其所有功能，因此在任何地方包含它都会破坏使用 LazyMotion 的好处。

为了帮助防止这种情况，可以在 LazyMotion 上设置 strict 属性。如果在其中任何位置加载了 motion 组件，它将抛出一个错误，提醒您改为渲染 m 组件。

function App() {
  // This will throw!
  return (
    <LazyMotion strict>
      <motion.div />
    </LazyMotion>
  )
}