Add library bundler #9489
Add library bundler #9489
Conversation
| if (bundle) { | ||
| resolved = potential.find(a => a.type === bundle.type); | ||
| } | ||
| resolved ||= potential[0]; | ||
| } | ||
|
|
There was a problem hiding this comment.
The changes in this file are to handle the case where a dependency resolves to multiple bundles. In that case, we need to prioritize the one with the same type as the parent bundle. We also prioritize reference edges over bundle group resolution
| for (let b of this.bundleGraph.getReferencedBundles(this.bundle, { | ||
| recursive: false, | ||
| })) { | ||
| this.externals.set(relativeBundlePath(this.bundle, b), new Map()); | ||
| } | ||
| } |
There was a problem hiding this comment.
This logic ensures that we add imports for all referenced bundles. But we now wait to determine which symbols to import until they are used (below in addExternal). This way, we only include symbols user in this bundle instead of across all bundles.
This also switches to only including bundles non-recursively, otherwise we'd end up hoisting imports for things like CSS even if the library had "sideEffects": false. For a library, there's no need to hoist even with side effects. We leave that to the application bundler consuming the library.
| @@ -964,7 +1039,7 @@ ${code} | |||
| } else if (!symbol) { | |||
| invariant(false, 'Asset was skipped or not found.'); | |||
| } else { | |||
| return symbol; | |||
| return replacements?.get(symbol) || symbol; | |||
| } | |||
There was a problem hiding this comment.
Need to check replacements in case a symbol got aliased to an external.
| @@ -324,7 +309,6 @@ export class ScopeHoistingPackager { | |||
|
|
|||
| if ( | |||
| asset.meta.shouldWrap || | |||
| this.isAsyncBundle || | |||
There was a problem hiding this comment.
This should be handled by the isAssetReferenced check below. The library bundler makes every bundle "async", but we don't want to wrap those.
|
used the |
|
@mischnic ugh, looks like the string export syntax breaks webpack 4, which is still very widely used unfortunately. might need to revert that... |
|
Looks like we don't have a choice... |
Fixes #7254
This PR implements a separate bundler plugin for libraries that maps each input file to a separate output bundle, i.e. not bundling at all. This is desirable for libraries because bundlers handle separate files better for tree shaking (via the
sideEffectsfield in package.json). It's especially helpful for component libraries that import CSS, because only the CSS for used components is included rather than everything.This is currently implemented as a separate bundler plugin (
@parcel/bundler-library) that you'd need to manually install and configure to use instead of the default bundler. Maybe this could be the default behavior in v3 though.This is not fully complete (e.g. doesn't handle dynamic import in libraries which isn't too common), but it is able to successfully build React Spectrum.