1

This question is regarding code splitting in react, Let us take an example where I have my bundle.js file

I split it into two files bundle.js and vendor.js, and I can include this in my index.html 

index.html
  <script src='./bundle.js'/>
  <script src='./vendor.js'/>

Is there a way so that I can include vendor.js file in my bundle.js file and both file then can be loaded parallel.

shaan
  • 482
  • 5
  • 25
  • 1
    looks like this question is what need. https://stackoverflow.com/questions/10808109/script-tag-async-defer – Wen W Mar 15 '20 at 03:24
  • Typically, Webpack would generate an `index.html` for you with the script injected. Can you include your Webpack config? – kmui2 Mar 15 '20 at 04:42

2 Answers2

2

well.. if you are using webpack as your module bundler, then following piece of code is responsible for code splitting.. Just remove the code responsible for splitting into chunks.

optimization: {
//        splitChunks: {
//          cacheGroups: {
//            commons: {
//              test: /[\\/]node_modules[\\/]/,
//              name: "vendors",
//              chunks: "all"
//            }
//          }
//        }
      }
Barun Patro
  • 860
  • 4
  • 13
0

If you are using webpack, it does this automatically for you (If you use dynamic import or set chunks).

But if want to do this manually, you could create a script element in bundle.js. And set async or defer based on your use case.

Balavishnu V J
  • 125
  • 1
  • 6