CODEWITHSUNDEEP
javascriptreactjsperformancewebpack
Siri
Siri

Reputation: 1126

Performance impacts of having multiple react bundles in the same page

So I have a HTML page (the main page) which has references to 2 javascript bundles created by 2 different teams, say app1.js and app2.js.

<html>
<script src='path to app1.js'/>
<script src='path to app2.js' />
</html>

Both teams use react and react-dom.

It seems to be redundant to use react and react-dom in both of the bundles.

Can the production bundle of a single page app be created without react/react-dom in it so that the main page can look something like this?

<html>
<script src='path to react-cdn.js'/>
<script src='path to react-dom-cdn.js' />
<script src='path to app1.js without react/react-dom'/>
<script src='path to app2.js without react/react-dom' />
</html>

If both teams use separate versions of react/react-dom, will it cause version conflicts?

Please note:

  1. The teams work separately in separate codebases.
  2. I control the main page. But I don't have control over the teams. Meaning, I can't combine them into one.
  3. They will need react and react-dom in their development environment.
  4. Both teams use Webpack.

Upvotes: 2

Views: 744

Answers (1)

N.G. Revathy
N.G. Revathy

Reputation: 36

You can use Webpack externals for this.

We have a similar setup where there are multiple react bundles in the same page. So it didnt make sense to have react, react-dom, moment etc in every bundle.

You could try the following:

  • Provide react and react-dom as global dependencies in the html page
  • Have both the teams work on those versions of react and react-dom
  • Use Webpack externals to omit react and react-dom from the production bundles.

Upvotes: 2

Related Questions