Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

by

I’d highly recommend using Webpack Bundle Analyzer to make your bundle smaller (https://github.com/th0r/webpack-bundle-analyzer). You can see what is making your bundle so big. You might also be using all of firebase, lodash, and jquery. In addition to using webpack production plugins, try using ignore whatever you’re not using and import only what you need like so:
In webpack plugins:

    new webpack.IgnorePlugin(/^\.\/auth$/, /firebase$/),
    new webpack.IgnorePlugin(/^\.\/storage$/, /firebase$/),
    new webpack.IgnorePlugin(/^\.\/messaging$/, /firebase$/),

In your imports: 

 const Firebase: any = require('firebase/app');  require('firebase/database');

For lodash, import only what you need or make a custom build (https://lodash.com/custom-builds): 

import find from 'lodash/find'

You can also create jquery custom builds as well.

More Related Contents:

  1. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  2. The create-react-app imports restriction outside of src directory
  3. Correct path for img on React.js
  4. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  5. How to load all files in a directory using webpack without require statements
  6. How to load image files with webpack file-loader
  7. ES6 modules implementation, how to load a json file
  8. How to import image (.svg, .png ) in a React Component
  9. firebase.auth is not a function
  10. When should I use brackets with imports
  11. How to store Configuration file and read it using React
  12. where is create-react-app webpack config and files?
  13. Can I use webpack to generate CSS and JS separately?
  14. Conditional build based on environment using Webpack
  15. Importing CSS files in Isomorphic React Components
  16. Webpack output is empty object
  17. Webpack breaking change
  18. Is it possible to use dotenv in a react project?
  19. “You may need an additional loader to handle the result of these loaders.”
  20. how to set up an inline svg with webpack
  21. Electron IPC and nodeIntegration
  22. Webpack 5 – Uncaught ReferenceError: process is not defined
  23. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  24. React JS Server side issue – window not found
  25. how can I use top level “await” in typescript next.js
  26. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
  27. How to dynamically import SVG and render it inline
  28. Static image src in Vue.js template
  29. How to force remounting on React components?
  30. Update Array in React

Leave a Comment