LazyMotion
为了方便使用，motion组件组件预先捆绑了所有功能，包大小约为 34kb。
使用 LazyMotion 和 m 组件，我们可以将初始渲染的包大小减少到 6kb，然后同步或异步加载部分功能。
用法
不要导入 motion，而是导入更精简的 m 组件。
import { m } from "motion-v"
m 的使用方式与 motion 完全相同，但与 motion 不同，m 组件没有预加载动画、布局动画或拖动手势等功能。
相反，我们通过 LazyMotion 组件手动加载这些功能。这使您可以选择要加载的功能，以及是将它们作为主包的一部分加载，还是延迟加载。
<script setup> import { LazyMotion, domAnimations, m } from "motion-v" </script> <template> <!--Load only the domAnimation package--> <LazyMotion :features="domAnimations"> <m.div :animate="{ opacity: 1 }" /> </LazyMotion> </template>
可用功能
目前有两个功能包可以加载
domAnimation：这提供了对动画、变体、退出动画以及按下/悬停/焦点手势的支持。（+18kb）domMax：这提供了对以上所有功能的支持，外加平移/拖动手势和布局动画。（+28kb）
未来可能会提供更精细的功能包，但目前选择这些功能包是为了减少功能之间的重复，最终可能会导致下载更多数据。
同步加载
通过将这些功能包之一传递给 LazyMotion，它们将被捆绑到您的主 JavaScript 包中。
<script setup> import { LazyMotion, domAnimations, m } from "motion-v" </script> <template> <LazyMotion :features="domAnimations"> <m.div :animate="{ opacity: 1 }" /> </LazyMotion> </template>
异步加载
如果您使用像 Webpack 或 Rollup 这样的打包器，我们可以将动态导入函数传递给 features，这样它只会在我们执行初始渲染后才获取功能。
首先，创建一个文件，该文件仅导出您想要加载的功能。
// features.js import { domAnimations } from "motion-v" export default domAnimations // index.js const loadFeatures = import("./features.js") .then(res => res.default) <template> <LazyMotion :features="loadFeatures"> <m.div :animate="{ scale: 1.5 }" /> </LazyMotion> </template>
严格模式
默认值: false
如果为 true，则当 motion 组件在 LazyMotion 组件内渲染时会抛出错误（从而消除了延迟加载的包大小优势）。
<!-- This component will throw an error that explains using a motion component instead of the m component will break the benefits of code-splitting. --> <template> <LazyMotion :features="domAnimations" strict> <motion.div /> </LazyMotion> </template>
为了方便使用，motion组件组件预先捆绑了所有功能，包大小约为 34kb。
使用 LazyMotion 和 m 组件，我们可以将初始渲染的包大小减少到 6kb，然后同步或异步加载部分功能。
用法
不要导入 motion，而是导入更精简的 m 组件。
import { m } from "motion-v"
m 的使用方式与 motion 完全相同，但与 motion 不同，m 组件没有预加载动画、布局动画或拖动手势等功能。
相反，我们通过 LazyMotion 组件手动加载这些功能。这使您可以选择要加载的功能，以及是将它们作为主包的一部分加载，还是延迟加载。
<script setup> import { LazyMotion, domAnimations, m } from "motion-v" </script> <template> <!--Load only the domAnimation package--> <LazyMotion :features="domAnimations"> <m.div :animate="{ opacity: 1 }" /> </LazyMotion> </template>
可用功能
目前有两个功能包可以加载
domAnimation：这提供了对动画、变体、退出动画以及按下/悬停/焦点手势的支持。（+18kb）domMax：这提供了对以上所有功能的支持，外加平移/拖动手势和布局动画。（+28kb）
未来可能会提供更精细的功能包，但目前选择这些功能包是为了减少功能之间的重复，最终可能会导致下载更多数据。
同步加载
通过将这些功能包之一传递给 LazyMotion，它们将被捆绑到您的主 JavaScript 包中。
<script setup> import { LazyMotion, domAnimations, m } from "motion-v" </script> <template> <LazyMotion :features="domAnimations"> <m.div :animate="{ opacity: 1 }" /> </LazyMotion> </template>
异步加载
如果您使用像 Webpack 或 Rollup 这样的打包器，我们可以将动态导入函数传递给 features，这样它只会在我们执行初始渲染后才获取功能。
首先，创建一个文件，该文件仅导出您想要加载的功能。
// features.js import { domAnimations } from "motion-v" export default domAnimations // index.js const loadFeatures = import("./features.js") .then(res => res.default) <template> <LazyMotion :features="loadFeatures"> <m.div :animate="{ scale: 1.5 }" /> </LazyMotion> </template>
严格模式
默认值: false
如果为 true，则当 motion 组件在 LazyMotion 组件内渲染时会抛出错误（从而消除了延迟加载的包大小优势）。
<!-- This component will throw an error that explains using a motion component instead of the m component will break the benefits of code-splitting. --> <template> <LazyMotion :features="domAnimations" strict> <motion.div /> </LazyMotion> </template>
为了方便使用，motion组件组件预先捆绑了所有功能，包大小约为 34kb。
使用 LazyMotion 和 m 组件，我们可以将初始渲染的包大小减少到 6kb，然后同步或异步加载部分功能。
用法
不要导入 motion，而是导入更精简的 m 组件。
import { m } from "motion-v"
m 的使用方式与 motion 完全相同，但与 motion 不同，m 组件没有预加载动画、布局动画或拖动手势等功能。
相反，我们通过 LazyMotion 组件手动加载这些功能。这使您可以选择要加载的功能，以及是将它们作为主包的一部分加载，还是延迟加载。
<script setup> import { LazyMotion, domAnimations, m } from "motion-v" </script> <template> <!--Load only the domAnimation package--> <LazyMotion :features="domAnimations"> <m.div :animate="{ opacity: 1 }" /> </LazyMotion> </template>
可用功能
目前有两个功能包可以加载
domAnimation：这提供了对动画、变体、退出动画以及按下/悬停/焦点手势的支持。（+18kb）domMax：这提供了对以上所有功能的支持，外加平移/拖动手势和布局动画。（+28kb）
未来可能会提供更精细的功能包，但目前选择这些功能包是为了减少功能之间的重复，最终可能会导致下载更多数据。
同步加载
通过将这些功能包之一传递给 LazyMotion，它们将被捆绑到您的主 JavaScript 包中。
<script setup> import { LazyMotion, domAnimations, m } from "motion-v" </script> <template> <LazyMotion :features="domAnimations"> <m.div :animate="{ opacity: 1 }" /> </LazyMotion> </template>
异步加载
如果您使用像 Webpack 或 Rollup 这样的打包器，我们可以将动态导入函数传递给 features，这样它只会在我们执行初始渲染后才获取功能。
首先，创建一个文件，该文件仅导出您想要加载的功能。
// features.js import { domAnimations } from "motion-v" export default domAnimations // index.js const loadFeatures = import("./features.js") .then(res => res.default) <template> <LazyMotion :features="loadFeatures"> <m.div :animate="{ scale: 1.5 }" /> </LazyMotion> </template>
严格模式
默认值: false
如果为 true，则当 motion 组件在 LazyMotion 组件内渲染时会抛出错误（从而消除了延迟加载的包大小优势）。
<!-- This component will throw an error that explains using a motion component instead of the m component will break the benefits of code-splitting. --> <template> <LazyMotion :features="domAnimations" strict> <motion.div /> </LazyMotion> </template>
