ReactJs/Framer Motion 在移动设备上速度很慢

Question

我的 ReactJs 应用程序在 PC 上运行良好，但在移动设备上变得缓慢，

not sure but I think it's the framer motion library that is causing this framing problem

。 我一直在寻找这个问题的解决方案，但找不到答案。

这是该网站的链接https://trayfoods.pages.dev

Answer 1

https://dev.to/nilanth/how-to-reduce-react-app-loading-time-by-70-1kmm https://proxify.io/articles/build-large-scale-React-apps#6-obey-naming-conventions

既然您已经尝试过我之前的两个答案，也许可以尝试通过延迟加载页面本身和组件来减少反应应用程序加载时间

注意： 确保你的 App.js 到 App.jsx 否则它将无法工作

//For instance
const Dashboard = lazy(() => import('components/Dashboard'));

我如何应用它

import { lazy } from "react";
//inside my components/i have an index.js file 
export const NavbarLazy = lazy(()=> import('../components/Navbar/Navbar'));

//inside App.jsx 
import {NavbarLazy } from './components/index';
function App() {
  return (
    <div className="App">
      <NavbarLazy />
    </div>
  );
}

Answer 2

我遇到了同样的问题。

它可能是转换属性（如果你使用过它）。

这是 GitHub 上的问题