Support resourceQuery in Turbopack rules

[kevva]

Goals

1. To make Turbopack handle bundling of some assets, but not all
2. Add the ability to exclude/include assets depending on their query

Non-Goals

N/A

Background

In our app we're currently still using Webpack due to incompatibilities with Turbopack. One of the larger ones is supporting bundling SVGs depending on the resourceQuery property in the Webpack loaders. For smaller icons that we need to be able to change color on etc, we bundle with svgr, but for larger SVG images we just let the URL loader handle it to avoid increasing the bundle size unnecessarily. The configuration looks like this:

const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'))

config.module.rules.push(
  {
    ...fileLoaderRule,
    test: /\.svg$/i,
    resourceQuery: /url/,
  },
  {
    test: /\.svg$/i,
    resourceQuery: { not: /url/ },
    use: ['@svgr/webpack'],
  },
)

So an import ending with .svg?url will not be bundled whereas the rest of the .svg imports will. This helps save bundle size greatly.

Proposal

I don't have a strong opinion on how this should be implemented, maybe you want to go the same route as Webpack, or maybe you have something planned for this already. But for someone who is eager to switch to Turbopack, I'm hoping that a stopgap solution would be fine in the meantime.

[kevva]

Probably a duplicate of #65360.

[mwaterman29]

need ^^

[kevva]

Hey @kdy1, I know you added support for this in #69703. However, it seems like you still can't pass a not filter in the config itself meaning you have to create a new loader and do the resourceQuery check inside. I want .svg imports ending with ?url (large SVGs) to be handled by file-loader (or ideally the default loader for turbo whatever name it has, can't find it) and the rest to be ran through svgr. However, that means that my loader can export two file types, .js and .svg which the loader configuration doesn't support.

Is this achievable in some way?

[kevva]

@timneutkens, is this ever going to be supported? It seems like most development is geared towards Turbopack atm and I'm finding it hard to keep our application compatible with Next.js. We have hundreds of SVGs (flags, crypto icons etc) that we don't want to bundle but load as files, but we still have some UI icons that we want to bundle so that we can change their color etc. This issue has been blocking us from migrating for over a year now...

Today this PR was merged which will degrade our app performance one way or the other since we also use Sentry which isn't compatible with cacheComponents (in Webpack at least). We either have to disable ppr/cacheComponents or bundle all SVGs and migrate to Turbopack (if this works with Sentry), but that will make our client bundles huge and we run our app as a webview inside a mobile app so it needs to load very fast to still feel native.

I realize this forum isn't support ticket system just for me, but this seems like an essential feature if you're real about performance and I've been nagging you guys in other similar issues/PR:s about this all year. I would gladly do it myself but I'm not too familiar with your Rust code.