Expose just scripts for chunks

[LorenDorez]

🚀 Feature Proposal

I would like a method on the extract to get the scripts minus the entry points.

Motivation

Since im doing SSR through ReactJS.net i already have the entry scripts load on the page. I just need the chunks.

Example

Current

 getMainAssets(scriptType) {
    const chunks = [...this.entrypoints, ...this.chunks]
    const assets = this.getChunkAssets(chunks)
    if (scriptType) {
      return assets.filter(asset => asset.scriptType === scriptType)
    }
    return assets
  }

  getScriptTags(extraProps = {}) {
    const requiredScriptTag = this.getRequiredChunksScriptTag(extraProps)
    const mainAssets = this.getMainAssets('script')
    const assetsScriptTags = mainAssets.map(asset =>
      assetToScriptTag(asset, extraProps),
    )
    return joinTags([requiredScriptTag, ...assetsScriptTags])
  }

Suggested quick mockup

 getChunkAssets(scriptType) {
    const chunks = [...this.chunks]
    const assets = this.getChunkAssets(chunks)
    if (scriptType) {
      return assets.filter(asset => asset.scriptType === scriptType)
    }
    return assets
  }

  getChunkScriptTags(extraProps = {}) {
    const requiredScriptTag = this.getRequiredChunksScriptTag(extraProps)
    const mainAssets = this.getMainAssets('script')
    const assetsScriptTags = mainAssets.map(asset =>
      assetToScriptTag(asset, extraProps),
    )
    return joinTags([requiredScriptTag, ...assetsScriptTags])
  }

Pitch

This will allow for better integration with a Popular SSR library for react called ReactJS.net

[open-collective-bot]

Hey @LorenDorez 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[theKashey]

Sound right. It's time to "DRY" this package a little and provide more fine-grained functionality.

[charle692]

So I have a similar need but instead of it being to exclude entrypoints I want to be able to specify which chunk I want to generate script tags/elements or assets from. I feel like we could solve both of these issues by adding the ability to specify which chunks you want to generate elements/tags for.

So for example, within the ChunkExtractor I want to be able to specify multiple entrypoints as below:

const extractor = new ChunkExtractor({
  statsFile: statsFilePath,
  entrypoints: ["polyfill", "foobar"],
});

The way that we use polyfills in our app is based on feature detection on the browser. So I don't want to generate script elements for the polyfill assets but I want to make sure that the chunk information is generated. We then extract the polyfill asset urls and pass those onto the frontend. If we detect that polyfills are necessary, we create the script elements at runtime and load the polyfills before running the rest of the application.

This used to be possible using something like:

const baseSrcs = extractor.stats.entrypoints[initialEntrypoint].assets;
const polyfillSrcs: string[] = extractor.stats.entrypoints.polyfill.assets;

return polyfillSrcs.filter(src => !baseSrcs.includes(src));

But this is no longer the case due to #735. So my suggestion is that we allow a filter of sorts whenever calling getScriptElements, getMainAssets and others that will only filter out anything that you don't want to include.

Example:

extractor.getScriptElements(extraprops, chunksIWant);
extractor.getMainAssets("script", chunksIWant);

I have a prototype written locally that I can polish and put into a PR if interested? My only concern is the method signatures. Currently getScriptElements and others have the first argument as optional. Adding another second optional argument would work (without introducing a breaking change) but usage would be less than ideal.

extractor.getScriptElements({}, ["foobar"]);
extractor.getMainAssets(null, ["foobar"]);

My personal opinion is that the arguments are converted into a single object.

getScriptElements({ extraProps: {}, filteredChunks: []}) {
  ...
}

And so usage becomes like so, allowing you to specify which options you want:

extractor.getScriptElements({ filteredChunks: ["foobar"] });

The only problem with that is that it introduces a breaking change requiring a major version bump. Curious your thoughts on it? I'm open to writing it myself and have the bandwidth to do so if we decide on a direction here. Especially since it's something that we need to be able to upgrade.

[theKashey]

My only concern is the method signatures.

It might be a better idea to create a more complex API for more complex cases. Not extend existing.

[charle692]

Fair enough, I'll start exploring that and put up a PR so that we can discuss it further.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[charle692]

Bump

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.