fix: create same hashes on server and client #1976

robertkowalski · 2021-09-29T14:45:28Z

we saw a behaviour with dynamic imports for SSR, when the import
was directly referenced, e.g. with import(./foo') instead of
import('./') webpack would with create different filehashes in
the moduleMap when the option usedExports is enabled.

filenames before hashing in webpack with usedExports followed the
pattern: filename.js|abc

filenames without usedExports are simply the filename: filename.js

they are then hashed in webpacks HashedModuleIdsPlugin.js with
different results, leading to an incomplete modulesMap

Co-authored-by: Jonas Holland jonas.holland@new-work.se

This pull request closes issue # (put the issue number here)

Current state

Changes introduced here

Checklist

All commit messages adhere to the appropriate format in order to trigger a correct release
All code is written in untranspiled ECMAScript (ES 2017) and is formatted using prettier
Necessary unit tests are added in order to ensure correct behavior
Documentation has been added

Bors merge bot cheat sheet

We are using bors-ng to automate merging of our pull requests. The following table provides a summary of commands that are available to reviewers (members of this repository with push access) and delegates (in case of bors delegate+ or bors delegate=[list]).

Syntax	Description
bors merge	Run the test suite and push to master if it passes. Short for "reviewed: looks good."
bors merge-	Cancel an r+, r=, merge, or merge=
bors try	Run the test suite without pushing to master.
bors try-	Cancel a try
bors delegate+	Allow the pull request author to merge their changes.
bors delegate=[list]	Allow the listed users to r+ this pull request's changes.
bors retry	Run the previous command a second time.

This is a short collection of opinionated commands. For a full list of the commands read the bors reference.

we saw a behaviour with dynamic imports for SSR, when the import was directly referenced, e.g. with `import(./foo')` instead of `import('./')` webpack would with create different filehashes in the moduleMap when the option `usedExports` is enabled. filenames before hashing in webpack with `usedExports` followed the pattern: `filename.js|abc` filenames without `usedExports` are simply the filename: `filename.js` they are then hashed in webpacks `HashedModuleIdsPlugin.js` with different results, leading to an incomplete modulesMap Co-authored-by: Jonas Holland <jonas.holland@new-work.se>

robertkowalski · 2021-09-29T15:18:44Z

build size increases 150KB, but is still smaller than the previous fix with named module ids

robertkowalski · 2021-09-29T15:18:56Z

bors merge

1976: fix: create same hashes on server and client r=robertkowalski a=robertkowalski we saw a behaviour with dynamic imports for SSR, when the import was directly referenced, e.g. with `import(./foo')` instead of `import('./')` webpack would with create different filehashes in the moduleMap when the option `usedExports` is enabled. filenames before hashing in webpack with `usedExports` followed the pattern: `filename.js|abc` filenames without `usedExports` are simply the filename: `filename.js` they are then hashed in webpacks `HashedModuleIdsPlugin.js` with different results, leading to an incomplete modulesMap Co-authored-by: Jonas Holland <jonas.holland@new-work.se> This pull request closes issue # (_put the issue number here_)  ## Current state  ## Changes introduced here  ## Checklist - [ ] All commit messages adhere to the [appropriate format](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit) in order to trigger a correct release - [ ] All code is written in untranspiled ECMAScript (ES 2017) and is formatted using [prettier](https://prettier.io) - [ ] Necessary unit tests are added in order to ensure correct behavior - [ ] Documentation has been added <details> <summary>Bors merge bot cheat sheet</summary> We are using [bors-ng](https://github.com/bors-ng/bors-ng) to automate merging of our pull requests. The following table provides a summary of commands that are available to reviewers (members of this repository with push access) and delegates (in case of `bors delegate+` or `bors delegate=[list]`). | Syntax | Description | | --- | --- | | bors merge | Run the test suite and push to master if it passes. Short for "reviewed: looks good." | | bors merge- | Cancel an r+, r=, merge, or merge= | | bors try | Run the test suite without pushing to master. | | bors try- | Cancel a try | | bors delegate+ | Allow the pull request author to merge their changes. | | bors delegate=[list] | Allow the listed users to r+ this pull request's changes. | | bors retry | Run the previous command a second time. | This is a short collection of opinionated commands. For a full list of the commands read the [bors reference](https://bors.tech/documentation/). </details> Co-authored-by: Robert Kowalski <robert.kowalski@new-work.se>

bors · 2021-09-29T18:59:14Z

Timed out.

robertkowalski · 2021-09-30T07:49:51Z

all green, only bors timed out (also in bors merge) -- lets fix bors after the release.

We observed that in some cases the generated module ids differe between the browser and server build. This happens when one of the builds is able to concatenate modules into one chunk while the other build can't (e.g. because the modules live in different chunks because of code splitting). Because we did not want to split the server build into chunks and then load them manually, we decided to generate stable chunk names, that do not differ between browser/server, in our importComponent babel plugin. We tried to work around this issue previously via #1976 but with a later webpack version our workaround stopped working. Furthermore, our previous workaround had other issues, which impacted tree-shaking and therefore the bundle size. Co-authored-by: Markus Wolf <markus.wolf@new-work.se> Co-authored-by: Philipp Hinrichsen <philipp.hinrichsen@new-work.se> Co-authored-by: Robert Kowalski <robert.kowalski@new-work.se>

2070: Fix `importComponent` r=ZauberNerd a=ZauberNerd Ref: #1632, #1976 Todo: - [x] What happens if we import the same file from different files? I suspect our babel plugin will generate different chunk names which should in fact not be different. So maybe our hash should not include the filepath of the importing component but only the filepath of the imported component. - seems to create separate entries in the `namedChunkGroups` which point to the same asset. <details> <summary>Bors merge bot cheat sheet</summary> We are using [bors-ng](https://github.com/bors-ng/bors-ng) to automate merging of our pull requests. The following table provides a summary of commands that are available to reviewers (members of this repository with push access) and delegates (in case of `bors delegate+` or `bors delegate=[list]`). | Syntax | Description | | --- | --- | | bors merge | Run the test suite and push to master if it passes. Short for "reviewed: looks good." | | bors merge- | Cancel an r+, r=, merge, or merge= | | bors try | Run the test suite without pushing to master. | | bors try- | Cancel a try | | bors delegate+ | Allow the pull request author to merge their changes. | | bors delegate=[list] | Allow the listed users to r+ this pull request's changes. | | bors retry | Run the previous command a second time. | This is a short collection of opinionated commands. For a full list of the commands read the [bors reference](https://bors.tech/documentation/). </details> Co-authored-by: Björn Brauer <bjoern.brauer@new-work.se> Co-authored-by: Robert Kowalski <robert.kowalski@new-work.se>

We observed that in some cases the generated module ids differe between the browser and server build. This happens when one of the builds is able to concatenate modules into one chunk while the other build can't (e.g. because the modules live in different chunks because of code splitting). Because we did not want to split the server build into chunks and then load them manually, we decided to generate stable chunk names, that do not differ between browser/server, in our importComponent babel plugin. We tried to work around this issue previously via #1976 but with a later webpack version our workaround stopped working. Furthermore, our previous workaround had other issues, which impacted tree-shaking and therefore the bundle size. Co-authored-by: Markus Wolf <markus.wolf@new-work.se> Co-authored-by: Philipp Hinrichsen <philipp.hinrichsen@new-work.se> Co-authored-by: Robert Kowalski <robert.kowalski@new-work.se>

robertkowalski mentioned this pull request Sep 29, 2021

fix: use NamedModuleIdsPlugin for production #1975

Closed

4 tasks

robertkowalski added the 📦 master Apply this label to a pull request, if it has to be cherry-picked to the maste-branch. label Sep 29, 2021

jhiode approved these changes Sep 29, 2021

View reviewed changes

robertkowalski merged commit 63d90db into master Sep 30, 2021

robertkowalski deleted the used-exports branch September 30, 2021 07:49

ZauberNerd mentioned this pull request Jan 31, 2022

Fix importComponent #2070

Merged

1 task

hops-release-bot bot mentioned this pull request Feb 16, 2022

Fix importComponent (v15.x) #2078

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: create same hashes on server and client #1976

fix: create same hashes on server and client #1976

robertkowalski commented Sep 29, 2021

robertkowalski commented Sep 29, 2021

robertkowalski commented Sep 29, 2021

bors bot commented Sep 29, 2021

robertkowalski commented Sep 30, 2021

fix: create same hashes on server and client #1976

fix: create same hashes on server and client #1976

Conversation

robertkowalski commented Sep 29, 2021

Current state

Changes introduced here

Checklist

robertkowalski commented Sep 29, 2021

robertkowalski commented Sep 29, 2021

bors bot commented Sep 29, 2021

robertkowalski commented Sep 30, 2021