In my lerna project, I have two identical packages named p1 and p2.
Both p1 and p2 utilize a 3rd party package - in this case, eosjs@beta, which is approximately 50KB in size.
When I incorporate p1 into an example react project, the package size increases by 50KB as expected. However, when I add p2, the size grows by another 50KB, which is surprising.
One would assume that since p1 and p2 are using the same 3rd party library, only one reference to that library would be included in the example project compilation. But it appears that's not the case.
Link to example repo: https://github.com/warrick-eosny/sizetest
The increase in package size can be observed as follows:
ls examples/sizetest/build/static/js/ -lah
Before referencing p1
117K 1.13eeb203.chunk.js
1.4K main.2170ea98.chunk.js
1.5K runtime~main.229c360f.js
After referencing p1
165K 1.75baab58.chunk.js
3.7K main.36960386.chunk.js
1.5K runtime~main.229c360f.js
After referencing p1 and p2
212K 1.57bb37cb.chunk.js
6.4K main.491260eb.chunk.js
1.5K runtime~main.229c360f.js
The project in the examples folder was created using:
npx create-react-app sizetest –typescript
Both the p1 and p2 packages were created using:
yo node-typescript-webpack
Why does the example build keep growing? Shouldn't webpack be intelligent enough to include only one reference?
=============== UPDATE ==================
The "removing duplicate code" section here seems like it should solve my problem: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/#spitting_code_by_multiple_entry_points
However, implementing these suggestions did not resolve the issue.
- I ran "yarn eject" in the project folder and then added the suggested config: https://github.com/warrick-eosny/sizetest/blob/master/examples/sizetest/config/webpack.config.js#L196-L211
- Removed the uglify section for readability purposes
- Ran the build again
This approach generated a commons file, but upon inspecting its content:
grep \@module build/static/js/commons.bd2f73cb.chunk.js
It is evident that the code is still duplicated:
* @module Serialize
* @module Numeric
* @module RPC-Error
* @module Serialize
* @module Numeric
* @module RPC-Error
* @module API
* @module JSON-RPC
* @module API
* @module JSON-RPC