[EXP] Configure Plasmo to load React/React-DOM/Antd from external scripts to reduce bundle size

Open linjc opened this issue 9 months ago • 1 comments

What is the example you wish to see?

For example package.json

{
  "externals": ["react", "react-dom", "antd", "~components/", "~utils/"],  // merge into a common.js
}

build/chrome-mv3-prod/options.html, /popup.html, /tabs.html, /sandbox.html, ... *.html

<html>
  <head>
    <script src="/common.js"></script>
    <script src="/option[popup|tabs|...].js"></script>
  </head>
</html>

build/chrome-mv3-prod/manifest.json

"content_scripts": [
    {
      "matches": ["https://*.plasmo.com/*"],
      "js": ["common.js", "plasmo.js"]
    },
   {
      "matches": ["https://*.facebook.com/*"],
      "js": ["common.js", "facebook.js"]
    }
  ]

Is there any context that might help us understand?

I'm encountering an issue where the bundle size becomes excessively large when using Plasmo. Specifically, pages like options, popup, contents, tabs, and sandbox are each being bundled with their own separate copies of React/React-DOM and Antd UI.

To address this and reduce the overall bundle size, I'm looking to extract React/React-DOM/Antd as common dependencies and load them via external script tags instead. Could you provide splitChunks configuration to achieve this?

Code of Conduct

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

Jul 10 '25 03:07 linjc

yeah！

Jul 18 '25 02:07 LTRltr