How to minimize the size of webpack’s bundle?

by

According to your comments you are using material-ui and react-bootstrap. Those dependencies are bundled by webpack along with your react and react-dom packages. Any time you require or import a package it is bundled as part of your bundle file.

And here it comes my guess. You are probably importing the react-bootstrap and material-ui components using the library way:

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

This is nice and handy but it does not only bundles Button and FlatButton (and their dependencies) but the whole libraries.

One way to alleviate it is to try to only import or require what is needed, lets say the component way. Using the same example:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.

If you are not using lot of components then it should reduce considerably the size of your bundled file.

As further explanation:

When you are using the library way you are importing all these react-bootstrap and all these material-ui components, regardless which ones you are actually using.

More Related Contents:

  1. Dynamically import images from a directory using webpack
  2. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  3. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  4. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  5. Dynamically Add Images React Webpack
  6. How to import and export components using React + ES6 + webpack?
  7. Remove console.logs with Webpack & Uglify
  8. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  9. How to tell webpack dev server to serve index.html for any route
  10. IMAGE: You may need an appropriate loader to handle this file type
  11. React Js require ‘fs’
  12. How to use Google fonts in React.js?
  13. Nextjs: Unable to load images from static folder
  14. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  15. webpack can’t find module if file named jsx
  16. How should I configure create-react-app to serve app from subdirectory?
  17. How to hash CSS class names in Nextjs?
  18. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  19. combine react build output into single js file
  20. How to set build .env variables when running create-react-app build script?
  21. Importing images breaks jest test
  22. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  23. Webpack & Typescript image import
  24. How to bundle a React app to a subdirectory on a server?
  25. Unable to load images from static folder
  26. Preset files are not allowed to export objects
  27. How do I hide API key in create-react-app?
  28. Trace why a React component is re-rendering
  29. ESLint Must use destructuring state assignment
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment