Search code examples
reactjswebpacklazy-loadingcode-splitting

Optimizing libraries with web pack

I am attempting to publish a small library of react UI components. These components have dependencies: Matarial UI, React Rotuer, etc;

When I build my code I get a warning about exceeding the recommended bundle size. I am at 451Kib. When I analyze my bundle I notice that 96.1% of it is dependencies that have been added to the bundle from node_modules.

Since I am only going to be publishing a handfull of components that are also going to be imported with webpack, is there a way to exclude the dependencies from my bundle and have them packaged in the bundle of any app that uses my components?

I think I need to use code-splitting, or lazy-loading, or something, but I am not sure of the proper way to get started.

Solution

  • Pieces of Advice I can give you:

    1. Use webpack-node-externals to exclude node_modules from bundle. If your code depends on packages that won't be included in the user app - use whitelist to bundle them as well.

    2. Also mark Matarial UI, React Rotuer (and probably react) as peerDependecies in package.json.