[BUG] Significant bundlesize increase with framer-motion@5 while using LazyMotion #1331
Comments
|
I agree, shouldn't be this much. How have you configured |
|
I'm using nextjs and have it configured like this, should be correct, right? // _app.tsx
import { FramerNextPages } from '@graphcommerce/framer-next-pages'
import { LazyMotion } from 'framer-motion'
import { AppPropsType } from 'next/dist/shared/lib/utils'
import React, { useEffect } from 'react'
import { AppProps } from './types'
export default function App(props: AppProps & AppPropsType) {
useEffect(() => document.getElementById('jss-server-side')?.remove())
return (
<LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
<FramerNextPages {...props} />
</LazyMotion>
)
}// framerFeatures.tsx
import { domMax } from 'framer-motion'
export default domMax |
|
Hmm yeah looks good to me. I'll take a look, we do have things that track this and there was a 1.5kb bump to the core package but this is obviously much bigger. |
|
Ah thanks that's helpful - it's weird though, that |
|
Alright, I'm waiting for nextjs 12.0.3 before moving on with this. maybe it will be better if i use the If you know how to fix it, that is great of course :) |
|
@mattgperry I've upgraded to nextjs 12.0.3, but the issue with using esmExternals isn't fixed (running into issues unrelated to framer motion though). The previous version of framer motion also didn't use the esmExternals feature though, so I still believe there is something going on with the latest release. Anything I can do to help you debug this further?
This 'just' builds the different entry points, or am I mistaken? But maybe there is some import in the minimal bundle that is triggering the inclusion of the complete projection bundle? |
|
Update: upgraded to the latest version, confirming that the issue is still present: |
|
@mattgperry I've got a minimal reproduction: https://stackblitz.com/edit/nextjs-rx15fu?file=pages%2F_app.tsx Steps to generate the treemaps:
Situation 1: LazyMotion is in the
|
|
@mattgperry this might be interesting vercel/next.js#33394 (comment) |
|
This fixed the issue! graphcommerce-org/graphcommerce#1550 (comment)
|
1. Read the FAQs 👇
2. Describe the bug
With the upgrade to framer/motion@5 we're seeing a significant bundle size increase. I understand that the new version offers lots of cool functionality so that there is an increase in bundle size could be expected. I wouldn't expect his however when using LazyMotion,
We're already using the
LazyMotionfeature and I would thus expect for the bundle size not too increase significantly.4. Steps to reproduce
Steps to reproduce the behavior:
5. Expected behavior
Bundle size is not increased, and the additional features are loaded lazily
6. Video or screenshots
Not applicable
7. Environment details
Not applicable
The text was updated successfully, but these errors were encountered: