SWC doesn't tree shake library

[codart1]

I know this one is a well-known issue but it does impact significantly my team's DX.
This is a minimal reproduction:
https://codesandbox.io/p/sandbox/next-js-swc-no-tree-shaking-6siw3h
Observe that /small-bundle and /big-bundle both only render a <Box/> from @chakra-ui but they did compile different numbers of modules (216 modules vs 748 modules).
The above example just scratches the surface. In our real app, it produces this:

After a few fast refreshes, my laptop becomes overhead and ends up with memory heap overflow:

<--- Last few GCs --->

[72078:0x4efda00]   605248 ms: Mark-sweep (reduce) 2061.6 (2109.8) -> 2059.3 (2087.5) MB, 258.1 / 0.1 ms  (+ 8.6 ms in 11 steps since start of marking, biggest step 6.4 ms, walltime since start of marking 471 ms) (average mu = 0.830, current mu = 0.603) t

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

Our app is a big monorepo with an ui internal package that re-exports chakra-ui component alongside our own component via a barrel file. something like this:

export {
 Tab,
 Badge,
 Center,
 Textarea,
 Button,
 HStack,
 Link,
 useId,
 Grid,
 useToast,
 AvatarBadge,
 Box,
 Flex,
 FormControl,
 FormLabel,
 IconButton,
 Menu,
 MenuButton,
 MenuItem,
 MenuList,
 Spacer,
 Switch,
 Text,
 VStack,
 Collapse,
 useDisclosure,
 Skeleton,
 SkeletonText,
 CircularProgress,
 Image,
 Popover,
 PopoverArrow,
 PopoverBody,
 PopoverContent,
 PopoverTrigger,
 Heading,
 useMenuButton,
 useMenuContext,
 chakra,
 Input as CInput,
 Portal as CPortal,
 SimpleGrid,
 PopoverFooter,
 TabList,
 TabPanel,
 TabPanels,
 Tabs,
} from '@chakra-ui/react';
export type {
 ChakraProps,
 As,
 BoxProps,
 FlexProps,
 SystemStyleObject,
 ToastId,
 MenuListProps,
 MenuProps,
 MenuItemProps,
 InputProps as CInputProps,
 SpaceProps,
 SimpleGridProps,
 IconButtonProps,
 TabsProps,
 TextProps,
} from '@chakra-ui/react';
export { ThemeProvider as UIProvider } from './theme/Provider';
export { Icon } from './Icon';
export type { IconNames } from './Icon';
export * from './form/TextField';
export * from './form/EditableField';
export * from './form/PhoneField';
export { toast } from './standaloneToast';
export * from './Input';
export { Spinner } from './Spinner';
export { SkeletonWrapper } from './SkeletonWrapper';
export { Avatar } from './Avatar';
export type { Props as AvatarProps } from './Avatar';
export { Tooltip } from './Tooltip';
export { Select } from './Select';
export type { Option } from './Select';
export { Portal } from './Portal';
export type { PortalProps } from './Portal';
export * from './TagsInput';
export { default as classNames } from 'classnames';
export { Editor, getEditor } from './Editor';
export { EmojiPicker } from './EmojiPicker';
export type { BaseEmoji } from 'emoji-mart';
export { useFullScreenMedia } from './useFullScreenMedia';
export { useFormatInput } from './useFormatInput';
export { Alert } from './Alert';
export type { AlertProps } from './Alert';
export { AnimatePresence } from 'framer-motion';
export { MotionBox } from './MotionBox';
export { SelectField } from './form/SelectField';
export { useHowManyToFetch } from './useHowManyToFetch';
export { useClientRect } from './useClientRect';
export { useScrollToBound } from './useScrollToBound';
export { AudioPlayer } from './AudioPlayer';
export { Dialpad } from './Dialpad';
export { useModal } from './useModal';
export { NoSSR } from './NoSSr';
export { NotificationBadge } from './NotificationBadge';
export { LoadingOverlay } from './LoadingOverlay';

And in a file inside our nextjs app, say app/test/page.tsx. We only import import { Box } from 'ui' then we got the whole library for this page.

I see that when I build my project, It got tree shaken just fine. Only while running next dev then we get this issue. I guess when building, NextJS use webpack so it knows how to tree shake but for dev it uses SWC which has this limitation 🤔 Correct me if I'm wrong.

Please, I don't want to sacrifice the DX (not using the barrel file). How can I solve this dilemma? 😅

[icyJoseph]

There might be an issue with detecting these imports as not having any side-effects. Tree shaking combines export identification and dead code elimination where side-effects are not present.

I don't have a straight up answer, but read through https://webpack.js.org/guides/tree-shaking/ and see if there's anything you can apply when it comes to side-effects. WebPack must understand in development mode that your ui library has no side-effects.

Side-effects in this context means code that ought to be imported, or executed, at any given time, in order to enable functionality on another module, roughly speaking anyway, it is a bit of a complex subject in JavaScript.

[codart1]

Yeah, thanks for your response. So I guess my assumption:

I guess when building, NextJS use webpack so it knows how to tree shake but for dev it uses SWC which has this limitation

is not true. NextJS should behave the same no matter it's development or production.

Let me take a look at your webpack side-effect guide. But, actually, I did add it to the next.config.js and it works great for production build. Not sure why SWC keeps ignoring this config:

[icyJoseph]

I am not sure there, perhaps SWC needs to know through .swrc (which I am not sure is supported in Next.js) about the external modules? I am a bit foggy on my knowledge there.

Could you make sure using https://www.npmjs.com/package/@next/bundle-analyzer that production is not bundling unwanted code on production?

[codart1]

Hold on. Maybe my statement is not correct. Let me double-check it.

[codart1]

Looks like the problem apply to a monorepo which use experimental.transpilePackages

tree-shaking.mp4

I'm scratching my hair... LOL

[StarkHK]

Hi @codart1 I am getting the same issue, i.e I am using NX mono repo with nextjs 13 with Chakra UI and in server env the webpack-hmr keep on loading and is always on pending which breaks our server with memory heap issue, Please let me know if we have any solution for this, Thank you.

[anthonyalayo]

@codart1 the issue is not with next dev or SWC, the issue is with webpack. I dug into this when I was trying to understand why next dev was so slow after importing material UI. I ended up filing an RFC on @mui here which covers a lot of the details.

While the link above has details explaining the issue, I can reiterate here. Webpack must traverse all imports when running in either dev or prod, as it does not know how to / can't optimize at the code level. It is only when terser (a webpack default plugin) minifies bundles that you end up with the "tree shaken" version.

Pointing to your barrel file, your development server will have all of those modules loaded in memory while it's running. This also happens when building, but it is more hidden since you aren't running an HMR server at the same time.

The best solution, which I also recommended @mui to do internally, is to configure either a babel or swc plugin to transform your imports. @mui ironically has docs on that here. This will allow you to keep the DX you want while significantly speeding up your webpack builds.

[jennyvallon]

BLESS YOU

[DonghyunKim98]

Does any one know how to use those codes in swc???

[IonelLupu]

Does anyone use react-aria-components? They don't have a setup like MUI. I have detailed my issue here: #60206

It works on Vite by default so I assume is a problem from NextJS.