Improve build times with Turbopack

[paales]

Describe the feature you'd like to request

We've got 7000+ modules that are compiling during development (on an M1 mac) and takes 23 seconds on initial startup:

Describe the solution you'd like

We'd like to use Turbopack as this should improve performance significantly. However, we've got quite a few modifications to the Webpack configuration.

I'll try to go over them one-by-one and see what we are running into and how to work around this.

Loaders

Current Loader usages

• Lingui: Possible solution 🤔
• Yaml: Is already supported by next.js

DefinePlugin 🤷‍♂️

Current DefinePlugin usages

• globalThis.__DEV__ docs for Apollo
• import.meta.graphCommerce for GraphCommerce

Next.js uses SWC of course, but not sure how to configure this? (Reference in SWC docs)

DuplicatesPlugin

Low priority and if necessary it can be removed.

Snapshot configuration and watchOptions 🤷‍♂️

Current configuration

We are heavily using transpilePackages: The users of GraphCommerce have access to the ts/tsx source code and everything is compiled with their build (including graphql codegen). We expect uses to be able to modify the files inside node_modules/@graphcommerce/* to debug problems, and find customization points etc. If such a file changes we want the HMR to work as expected.

Not yet clear if this will work or how we can customize the turbopack build to get this to work.

Resolve aliases 👍

Current aliases. Should be possible with Resolve aliases

InterceptorPlugin 🤷‍♂️

Plugin called. Complete plugin source code and Explanation of the functionality.

To get this to work fully type safe we use TypeScript's moduleSuffixes functionality

Example of generated interceptor for ProductPageAddToCartRow

Source code for ProductPageAddToCartRow.interceptor.tsx

Will be in node_modules/@graphcommerce/magento-product/components/ProductPage/ProductPageAddToCartRow.interceptor.tsx

/* hash:1406058359 */
/* eslint-disable */
/* This file is automatically generated for @graphcommerce/magento-product/components/ProductPage/ProductPageAddToCartRow */
import type { DistributedOmit as OmitPrev } from 'type-fest'

import { ProductPageAddToCartActionsRow as ProductPageAddToCartActionsRowAddCompareToProductPage } from '@graphcommerce/magento-compare/plugins/AddCompareToProductPage'

/** @see {@link file://./ProductPageAddToCartRow.tsx} for source of original */
/** Original source starts here (do not modify!): **/
import { Box, SxProps, Theme } from '@mui/material'
import { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
export type ProductPageAddToCartRowProps = {
  sx?: SxProps<Theme>
  children: React.ReactNode
  after?: React.ReactNode
  product: UseAddProductsToCartActionFragment
}
export function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
  const { sx, children, after } = props
  return (
    <>
      <Box
        sx={[
          (theme) => ({
            display: 'flex',
            alignItems: 'center',
            columnGap: theme.spacings.xs,
          }),
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
      >
        {children}
      </Box>
      {after && <Box>{after}</Box>}
    </>
  )
}
export const ProductPageAddToCartActionsRowOriginal = ProductPageAddToCartRow
export const ProductPageAddToCartQuantityRow = ProductPageAddToCartRow

/** Original source ends here (do not modify!) **/

type ProductPageAddToCartActionsRowAddCompareToProductPageProps = OmitPrev<
  React.ComponentProps<typeof ProductPageAddToCartActionsRowAddCompareToProductPage>,
  'Prev'
>

const ProductPageAddToCartActionsRowAddCompareToProductPageInterceptor = (
  props: ProductPageAddToCartActionsRowAddCompareToProductPageProps,
) => (
  <ProductPageAddToCartActionsRowAddCompareToProductPage
    {...props}
    Prev={ProductPageAddToCartActionsRowOriginal}
  />
)

/**
 * Here you see the 'interceptor' that is applying all the configured plugins.
 *
 * This file is NOT meant to be modified directly and is auto-generated if the plugins or the original source changes.
 *
 * @see {@link file://./ProductPageAddToCartRow.tsx} for original source file
 * @see {ProductPageAddToCartActionsRowAddCompareToProductPage} for source of applied plugin
 */
export const ProductPageAddToCartActionsRow =
  ProductPageAddToCartActionsRowAddCompareToProductPageInterceptor

It is currently not clear how to implement the moduleSuffixes