I am trying to serve a React widget for a Chatbot messenger like Intercom widget. Everything works fine until the SEO team argues with me about the size of the downloaded script.
I'm using:
React 16.13.1
React-scripts 3.4.1
Typescript 3.9.6
Redux 4.0.5
Styled-components 5.1.1
Material-UI 4.11.0
...
It weighs ~570k (gzipped) and that costs around 25 points on Google lighthouse benchmark.
So, just like Intercom did when they face the same issue, I split my code into chunks using dynamic import() feature. Now, when I run the benchmark it gives a good mark (I gain ~15 points) and everything goes green on dev mode.
But, I'm not sure anymore:
- how to integrate my widget's chunks on customer's pages? (of course not as they are in dev mode: 5 separate script tags)
- Which chunk/script from the generated ones should I use, and which one come dynamically?
- do chunks really call each other only when needed? (because they don't look so!)
- Do orders make a difference? (JS so I think it does)
I used to integrate similar script before modification:
<script
src="cdn.myhost.com/script.min.js"
data-lang="en"
data-license="XXX-XXX"
data-options='{"tags":["test"]}'
/>
Any suggestions will be helpful!