question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rework code-splitting results for bundlers that copy modules

See original GitHub issue

Right now we call out this broken behaviour in https://tooling.report/code-splitting/shared-objects-between-entry-points/, but it seems like we’re letting bundlers off the hook in other code-splitting tests.

Parcel and Webpack seem to assume that it’s one page per entry point. Parcel can know this by looking at the HTML, but even if you have multiple entry points in the HTML, it acts like copying modules is fine. I don’t believe Webpack documents that it assumes it’s one entry point per page.

Fwiw, tooling.report already has multiple entry points per page, as analytics is seperate. It seems like a bug that bundlers change the behaviour of your script in these cases. We’d certainly call it a bug if we were talking about a minifier!

Imagine:

  1. You have multiple entry points on one page.
  2. They use duplicates of the same module, so things like counters, weakmaps, weaksets etc etc become duplicated.
  3. You’re a standard developer, who doesn’t realise that’s a bug, so you assume the bundler is doing the right thing, and code accordingly.
  4. One day you add one more byte to your app, hit the magic number, the code splits and objects are no-longer copied, and the whole behaviour changes.

This seems pretty fundamental, and we can’t really say that Parcel and webpack ‘pass’ code splitting.

Proposal:

  • Rename https://tooling.report/code-splitting/multi-entry/ to multi-pages, making it clear that it’s a situation where multiple module copies are acceptable.
  • Rename https://tooling.report/code-splitting/shared-objects-between-entry-points/ to multi-entry, so this can be the general multi-entry test.
  • Other code splitting tests must do the right thing with object instances by default.
  • If you need to add a configuration option to avoid the bug, it’s a ‘partial’ pass.
  • If you need to add padding to the file, or split files, in order to get a consistent behaviour, it’s a ‘fail’.
  • Code copying is fine as long as only one version of the module is ever instantiated.

Undecided:

Does Parcel ‘pass’ or ‘partial’ the multi-pages test. You could say:

  • It’s a pass because the code works.
  • It’s a partial pass because the split threshold cannot be configured.

@developit: you get to tie-break the above I think.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
devongovettcommented, Jun 22, 2020

The Parcel issue should be fixed by https://github.com/parcel-bundler/parcel/pull/4786.

1reaction
devongovettcommented, May 15, 2020

FWIW, I would consider this a bug in Parcel. At the moment, each <script> tag creates a separate bundle group, but really all of the scripts should be in the same bundle group since they are loaded together. Modules are already deduplicated between multiple bundles in the same bundle group, so this should fix the issue.

If you don’t use HTML as an entry point, however, I’m not sure how parcel could know that they are loaded together. Open to suggestions there.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Code Splitting - webpack
This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can...
Read more >
Reduce JavaScript payloads with code splitting - web.dev
This minimizes the amount of script that needs to be parsed and compiled, which results in faster page load times. Popular module bundlers...
Read more >
The 100% correct way to split your chunks with Webpack
The idea behind bundle splitting is pretty simple. If you have one giant file, and change one line of code, the user must...
Read more >
Code-splitting is hard - Kevin Farrugia
If one or more stylesheets are imported in a single module or its dependencies, then a reference to the bundled stylesheet will only...
Read more >
Code Splitting
This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found