[Q/A] react-icon bloating Bundle Size

[HugeLetters]

What happened?

Running plasmo build --minify produces

Running plasmo build --minify --source-maps produces

Also this command runs extremely slow compared to the first one - 10s vs 200s (logs below). The step which takes up all the time is 🟡 0 | @plasmohq/parcel-packager, the last one.

Docs state that building for prod doesn't produce source maps by default but apparently it does - however I don't see any sourcemaps in the first produced bundle. But I will be honest I'm not nearly skilled enough to dig through both minified files to determine where does the bloat come from. I think I've tried rebuilding with vanilla tsconfig & package.json from create plasmo and results were the same but perhaps I've missed something.

The repo is here

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

No response

Relevant log output

> guessthegame-extended@0.0.2 build C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame
> plasmo build --minify "--verbose"

🟡 0      | Running command: build
🟣 Plasmo v0.69.3
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🟡 1      | Creating Manifest Factory...
🟡 2      | Ensure exists: C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame\.plasmo
🟡 3      | C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame\assets\icon.png found, creating resized icons
🟡 4      | Creating static templates for popup
🟡 5      | Creating static templates for options
🟡 6      | Creating static templates for newtab
🟡 7      | Creating static templates for devtools
🟡 8      | Parsed config: {
  matches: [ 'https://guessthe.game/', 'https://guessthe.game/?fpg=*' ],
  run_at: 'document_end',
  all_frames: true
}
🟡 9      | Adding content script:  C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame\contents\mainPage.ts
🟡 10     | { messageHandlerList: [], portHandlerList: [] }
🟡 11     | Hash changed, updating manifest
🔵 INFO   | Loaded environment variables from: []
🟡 0      | @plasmohq/parcel-transformer-manifest
🟡 1      | Adding icons
🟡 2      | Adding default_icon
🟡 3      | Adding default_popup
🟡 4      | Handling background service worker
🟡 0      | @plasmohq/parcel-bundler
🟡 0      | @plasmohq/parcel-packager
🟢 DONE   | Finished in 10636ms!

------------------------------------------------------------------
> guessthegame-extended@0.0.2 build C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame
> plasmo build --minify --source-maps "--verbose"

🟡 0      | Running command: build
🟣 Plasmo v0.69.3
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🟡 1      | Creating Manifest Factory...
🟡 2      | Ensure exists: C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame\.plasmo
🟡 3      | C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame\assets\icon.png found, creating resized icons
🟡 4      | Creating static templates for popup
🟡 5      | Creating static templates for options
🟡 6      | Creating static templates for newtab
🟡 7      | Creating static templates for devtools
🟡 8      | Parsed config: {
  matches: [ 'https://guessthe.game/', 'https://guessthe.game/?fpg=*' ],
  run_at: 'document_end',
  all_frames: true
}
🟡 9      | Adding content script:  C:\Users\ckuka\VS Code Projects\Chrome Extensions\guessthegame\contents\mainPage.ts
🟡 10     | { messageHandlerList: [], portHandlerList: [] }
🟡 11     | Hash changed, updating manifest
🔵 INFO   | Loaded environment variables from: []
🟡 0      | @plasmohq/parcel-transformer-manifest
🟡 1      | Adding icons
🟡 2      | Adding default_icon
🟡 3      | Adding default_popup
🟡 4      | Handling background service worker
🟡 0      | @plasmohq/parcel-bundler
🟡 0      | @plasmohq/parcel-packager
🟢 DONE   | Finished in 211037ms!

(OPTIONAL) Contact Details

ckuka71@gmail.com

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

So 2 issues:

• You're using an older version of plasmo - the newest will respect the minify flag. We remove minification by default due to chrome's production build requirement (they do not like obfuscated/bundled code)
• react-icon has a known issue regarding bundle and file-size. You will need to use path-specific import: React Icons Imports everything even when included 2 or 3 icons react-icons/react-icons#154

[HugeLetters]

BTW, do you think we should keep minify as the default, or should we --un-minify as default?

I think it would make sense for treeshaking to be the default behavior but minifying/uglyfying should be turned off by default. That makes sense to me.

[louisgv]

@HugeLetters when you test out the 165KB bundle, does it work?

[HugeLetters]

I've rolled back Plasmo to 0.69.3 and produced the small 165kb bundle again and have tested it - it works correctly, react-icons are included - they are injected into the webpage & are included in the bundle.

[louisgv]

@HugeLetters does the popup works with the smaller build as well? - When testing out your repo, the extension turned blank for me, showing a console indicating that some module was not added :d...

[HugeLetters]

@louisgv yeah, the popup breaks for me as well but I've checked and it's like that for all prod builds(v 0.69.3 & 0.70.1) - the dev build works fine tho.
Popup doesn't use react-icons so I assume this is an unrelated issue.

[louisgv]

I've upgraded to 0.70.1 yet the issue is still there - the issue could lie with react-icons but as far as I know they fixed their bundling issues since 2018: I've used their library with esbuild and treeshaking worked correctly.

I've inspected your prod build - it's largely SVG, no source-map bundled. Note that prod build use esbuild, but afaik react-icons suffer that bundle problem since forever and it has not been fixed. I'd check your bundle because ESBuild can only detect and dedupe ESM bundle, but with CJS package like react-icons, it suffer from the age-old problem of CJS barrel file

Furthermore - the small build with source-map does not work because it hoisted and stripped all of the icons dependency - likely a weird hoisting artifact but basically there's no svg in your smaller bundle.

[HugeLetters]

I've used a simple esbuild setup before migrating to Plasmo - it worked correctly with react-icons producing a bundle of ~150Kb with no extra steps.

I've also tried just now to import react-icons from index.esm.js which are ESM and not CJs but result is the same.

Furthermore - the small build with source-map does not work because it hoisted and stripped all of the icons dependency - likely a weird hoisting artifact but basically there's no svg in your smaller bundle.

I've replied above that I've tested small bundle myself and icons were included.