Can we split node modules library on route basis?

Question

We have website on react and done code splitting using loadable, and all webpack optimizations. One thing is concerning we are using 70 npm library and It leads to make a big vendor chunks which we splitted using splitChunks webpack.

What If we have a page which is using only 10 libraries out of 70 but webpack loads all library at once in the form of vendor-react and vendor-all, etc on chunking basis.

Is there any way to split node modules on route basis, If a page using 10 library, we load only 10 library instead of whole node_modules at once.

For example we have three pages HOME Page, PRODUCT LISTING PAGE, PRODUCT DETAIL PAGE.

And in package json We have 10 libraies installed example

"react-collapsible"
"react-cookie"
"react-datepicker"
"react-day-picker"
"react-dropdown"
"react-google-maps"
"react-helmet"
"react-id-swiper"
"react-lazy-hydration"
"react-lazyload"
"react-lazyload-img"
 "redux-actions"
"redux-connect"
"redux-form"
"redux-thunk"
"serialize-javascript"
"snake-case"
"superagent"
"superagent-logger"
"swiper"

HOME PAGE: 3 package are needed: "react-collapsible" "react-cookie" "react-datepicker" PRODUCT LISTING PAGE 4 package needed: "react-helmet" "react-id-swiper", "react-lazy-hydration" "react-lazyload"

PRODUCT DETAIL PAGE. 4 package needed "serialize-javascript" "snake-case" "superagent" "superagent-logger"

There must be common library as vendor will load for all pages.

Now If I open Home page, only home page 3 packages and common chunk will be loaded.

PRODUCT AND DETAIL packages should not be loaded. If I open Product listing page, only 4 packages and common chunk will be loaded. Home page package should not be loaded.

What do you mean by load? Do you mean download the library, run it, or both? — Shivam, Jun 23 '21 at 01:58
https://loadable-components.com/docs/library-splitting/ will this do you a favor? — gwl002, Jun 23 '21 at 04:15

gwl002 · Answer 1 · 2021-06-25T10:32:13.340

Yes. You can use splitChunks option. Read this blog and you will have a better understanding.Route-Based Code Splitting with Loadable Components and Webpack

In fact,webpack5 has a useful default config for splitChunks.

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Try to change the splitChunks.chunks config.

This indicates which chunks will be selected for optimization. When a string is provided, valid values are all, async, and initial. Providing all can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks.

Let's see some examples for different settings.

set chunks to initial. Packages in main are split into a vendor.Packages in screen1 are bundled into screen1 bundle,no vendor for screen1 is created.
set chunks to async. Sync packages are bundled into the main bundle no vendor bundle.Async packages are bundled into vendor.
set chunks to all. Both sync and async packages are bundled into separate bundles.

I just tried this in a SPA project. For ssr, maybe more settings are required.Here is the github link webpack-codesplit-test.Hope this will be helpful.

Thanks for answering the question, we have done this optimization using react loadable and splitChunks. My website is huge and there are so many libraries installed. And if we open any page , webpack load all vendors files like vendor-react, vendor-all depends on our splitchumks config. We want that on a single if we are using 3 libraries and the common chunks of 10 libraries, so webpack load only 13 libraries not 70 libraries. I have updated the question please go through once again please let us know. It will be very thankful.' — Amit Aslia, Jun 24 '21 at 06:43
Yeah It is server side page, universal website. server side then hydrate on client. I hope you got my question, what we want. — Amit Aslia, Jun 24 '21 at 23:50
After re-read the document and do some experiments. I find just set chunks to all will do the work. I will update my answer. — gwl002, Jun 25 '21 at 09:44

Can we split node modules library on route basis?

1 Answers1