6

I have a Reactjs application created using Create React app which while starting and building gives a lot of warnings which states that I have unused vars or imports in my Components.

./src/components/home/Header.js
    Line 10:   'Switch' is defined but never used  no-unused-vars
    Line 10:   'Route' is defined but never used   no-unused-vars

Does having no-unused-vars have a considerable impact on final bundle size and build time of the application. Can I reduce build time and bundle size by removing all these warnings?

Johnson
  • 118
  • 1
  • 11
  • Yes, removing these will reduce size but not much. You need to do uglify, if you really want to reduce size. – Shubham Batra Feb 05 '18 at 06:41
  • 1
    Thanks for your response @ShubhamBatra. I think Create React app comes with uglify out of box. I was looking for ways to optimize build size and time. – Johnson Feb 05 '18 at 08:35
  • Yes, uglify is out of box but it reduce my app size from 11.1 mb to 1.89 mb. you should see this answer https://stackoverflow.com/questions/34239731/how-to-minimize-the-size-of-webpacks-bundle/34241128#34241128 – Shubham Batra Feb 05 '18 at 12:19

1 Answers1

6

Checkout this package https://www.npmjs.com/package/source-map-explorer. And run

source-map-explorer bundle.js

It will give you detailed screenshot of your bundle file like which package is taking too much file size and all. Change the way you are importing packages mentioned in How to minimize the size of webpack's bundle? and also if some particular package is causing a size issue then switch to alternative packages.

Dipen Dedania
  • 1,452
  • 1
  • 21
  • 37