feat: 使用lazyMotion优化性能

Author: coderz-w

package.json

@@ -41,7 +41,8 @@
     "tailwind-scrollbar": "^3.1.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-animated": "^1.1.2"
+    "tailwindcss-animated": "^1.1.2",
+    "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.4.1",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 import { createElement, useEffect, useState } from 'react';
 import Image from 'next/image';
 
@@ -155,7 +155,7 @@ const Hero = () => {
     <div className="mt-[-2.5rem] min-w-0 md:px-44 max-w-screen overflow-hidden lg:mt-[-6.5rem] lg:h-dvh lg:min-h-[800px]">
       <TwoColumnLayout leftContainerClassName="mt-[110px] lg:mt-0 lg:h-[15rem] lg:h-1/2">
         <>
-          <motion.div
+          <m.div
             className=" relative text-center leading-[4] lg:text-left lg:ml-24 lg:mt-10"
             initial={{ y: 50, opacity: 1 }}
             animate={{ y: 0, opacity: 1 }}
@@ -178,9 +178,9 @@ const Hero = () => {
                   )
                 : null;
             })}
-          </motion.div>
+          </m.div>
 
-          <motion.div
+          <m.div
             initial={{ y: 50, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{
@@ -192,11 +192,11 @@ const Hero = () => {
             className="my-3 text-center lg:text-left lg:ml-24"
           >
             <span className=" opacity-70"> {description}</span>
-          </motion.div>
+          </m.div>
 
           <ul className="center mx-[60px] mt-8 flex flex-wrap gap-6 lg:mx-auto lg:mt-24 lg:justify-start lg:gap-4 lg:ml-24">
             {Object.entries(socialIds).map(([type, id], index) => (
-              <motion.li
+              <m.li
                 key={type}
                 initial={{ y: 50, opacity: 0 }}
                 animate={{ y: 0, opacity: 1 }}
@@ -209,7 +209,7 @@ const Hero = () => {
                 className="inline-block"
               >
                 <SocialIcon id={id} type={type} />
-              </motion.li>
+              </m.li>
             ))}
           </ul>
         </>
@@ -243,7 +243,7 @@ const Quote = () => {
   }, []);
 
   return (
-    <motion.div
+    <m.div
       initial={{ opacity: 0.0001, y: 50 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ type: 'spring', damping: 10, stiffness: 100 }}
@@ -255,14 +255,14 @@ const Quote = () => {
       <small className=" flex text-center items-center ">
         {quote.hitokoto}
         <span className=" text-center ml-4">— {quote.from}</span>
-        <motion.span onClick={() => getQuote()} className=" flex items-center ml-3 cursor-pointer">
+        <m.span onClick={() => getQuote()} className=" flex items-center ml-3 cursor-pointer">
           <i className="i-mingcute-refresh-2-line invisible group-hover:visible"></i>
-        </motion.span>
+        </m.span>
       </small>
       <span className="mt-6 animate-bounce">
         <i className="i-mingcute-right-line rotate-90 text-2xl" />
       </span>
-    </motion.div>
+    </m.div>
   );
 };
 
@@ -316,7 +316,7 @@ const WindVane = () => {
         <ul className=" flex flex-col flex-wrap gap-2 gap-y-10 opacity-80 lg:flex-row">
           {windsock.map((item, index) => {
             return (
-              <motion.li
+              <m.li
                 initial={{ opacity: 0.0001, y: 15 }}
                 viewport={{ once: true }}
                 whileInView={{
@@ -358,7 +358,7 @@ const WindVane = () => {
                 {index != windsock.length - 1 && (
                   <span className="mx-4 hidden select-none lg:inline"> · </span>
                 )}
-              </motion.li>
+              </m.li>
             );
           })}
         </ul>

src/app/(app)/(home)/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 import { memo, useState } from 'react';
 import Image from 'next/image';
 
@@ -32,7 +32,7 @@ const FriendCard = ({ friendModel }: { friendModel: FriendModel }) => {
   const [enter, setEnter] = useState(false);
 
   return (
-    <motion.div
+    <m.div
       key={friendModel.name}
       role="link"
       aria-label={`Go to ${friendModel.name}'s website`}
@@ -56,12 +56,12 @@ const FriendCard = ({ friendModel }: { friendModel: FriendModel }) => {
           {friendModel.desc}
         </span>
       </span>
-    </motion.div>
+    </m.div>
   );
 };
 const LayoutBg = memo(() => {
   return (
-    <motion.span
+    <m.span
       layoutId="bg"
       className="absolute -inset-2 z-[-1] rounded-md bg-slate-200/80 dark:bg-neutral-600/80 pointer-events-none"
       initial={{ opacity: 0.8, scale: 0.8 }}

src/app/(app)/friends/page.tsx

@@ -0,0 +1,3 @@
+export const Header = () => {
+  return <div>哈哈哈哈111111111</div>;
+};

src/components/layout/Header/Header.tsx

@@ -0,0 +1,2 @@
+import { Header } from './Header';
+export default Header;

src/components/layout/Header/index.ts

@@ -4,14 +4,13 @@ import type { PropsWithChildren } from 'react';
 
 import Content from '../Content';
 import Footer from '../Footer';
-// import { Header } from '../Header';
+import Header from '../Header';
 
 const Root = ({ children }: PropsWithChildren) => {
   return (
     <>
-      {/* <Header /> */}
+      <Header />
       <Content>{children}</Content>
-
       <Footer />
       {/* <ClientOnly>
         <FABContainer />

src/components/layout/Root/Root.tsx

@@ -20,23 +20,9 @@ const convertHexToRgbString = (hex: string): string => {
   return `${r} ${g} ${b}`;
 };
 
-const accentColorLight = [
-  // 浅葱
-  '#33A6B8',
-  '#FF6666',
-  '#26A69A',
-  '#fb7287',
-  '#69a6cc',
-];
-
-const accentColorDark = [
-  // 桃
-  '#F596AA',
-  '#A0A7D4',
-  '#ff7b7b',
-  '#99D8CF',
-  '#838BC6',
-];
+const accentColorLight = ['#33A6B8', '#FF6666', '#26A69A', '#fb7287', '#69a6cc'];
+
+const accentColorDark = ['#F596AA', '#A0A7D4', '#ff7b7b', '#99D8CF', '#838BC6'];
 
 const defaultAccentColor = { light: accentColorLight, dark: accentColorDark };
 

src/components/modules/shared/AccentColorStyleInjector/AccentColorStyleInjector.tsx

@@ -0,0 +1 @@
+export { domMax as default } from 'framer-motion';

src/components/providers/root/framer-lazy-feature.ts

@@ -1,9 +1,17 @@
+'use client';
+
 import { PropsWithChildren } from 'react';
 import { ThemeProvider } from 'next-themes';
+import { LazyMotion } from 'framer-motion';
 
 import ProviderComposer from '@/components/modules/shared/ProviderComposer';
 
-const webAppContexts: JSX.Element[] = [<ThemeProvider children key="themeProvider" />];
+const loadFeatures = () => import('./framer-lazy-feature').then((res) => res.default);
+
+const webAppContexts: JSX.Element[] = [
+  <ThemeProvider children key="themeProvider" />,
+  <LazyMotion features={loadFeatures} strict key="framer" />,
+];
 
 export default function WebAppProviders({ children }: PropsWithChildren) {
   return <ProviderComposer contexts={webAppContexts}>{children}</ProviderComposer>;