Webpack code splitting for asynchronous loading of reaction components in the library

Question

We have developed a React component library for internal use. The library uses webpack to link everything to bundle.js. The library is presented as an NPM module for use by our applications, which still work fine.

We recently added a Grid component that has very large external dependencies. Despite the fact that some of our applications do not need this component from the library, we decided to include it in the last package. This can dramatically affect the size of the package, so I followed the Webpack code splitting guide to break up the Grid component using dynamic imports. For our applications in which this library is installed as an NPM module, the component library package now looks like this node_modules:

├── node_modules/                 
│   ├── [our component library]/                 
│   │   ├── Grid.js # Asynchronously loaded Grid component
│   │   ├── bundle.js # Main bundle
│   │   └── ... other files in component library bundle

When creating the application (also using Webpack), the Grid component does not seem to be included in its own file in the final package. In fact, it does not turn on at all:

├── dist/                 
│   ├── main.js # App bundle
│   ├── vendor.js # Vendor bundle created with CommonChunksPlugin
│   └── ... other files in application bundle but no Grid.js

, Grid, Webpack :

Error: Loading chunk 0 failed.
  at HTMLScriptElement.onScriptComplete (bundle.js:757)

, , Grid . ? React ?

Answer 1

. , Grid , , npm. - , , . , 2 npm , Grid . webpack + dynamic, Grid , .

Answer 2

https://webpack.js.org/guides/code-splitting/#dynamic-imports import(), require.ensure . . https://github.com/croraf/myboiler.

: https://github.com/croraf/nutrients-calculator. . https://github.com/croraf/nutrients-calculator/blob/master/frontend/src/App.js https://github.com/croraf/nutrients-calculator/blob/master/frontend/src/routes/util/DynamicRoute.js .