问题
I am building a reactjs application using gulp and Browserify. I have used material-ui components in my application. There are 8 pages in my application using different components.
The build.js created by Browserify is 4mb in size. I want to reduce its size. I have searched and learned a little about the lazy loading design pattern. But I am confused how it should be used to make the size smaller of my application?
I am also using react router in my application so there are 8 routes defined. I have an idea that we can lazy load the files required for each route, but how could that be done in react?
P.S : I would have loved to share some code, but i don't understand what kind of code will be required for such a question.
回答1:
The problem is most likely that your javascript contains source maps. Source maps can easily increase the size of your code by an order of magnitude. Try taking a look at your compiled JS file and if you see large random strings that look something like this:
dlfheihfgrewifjwe;iofgrewfwejroifnekw.nfoeiquf0eqf;oiwehjfkl;qwejfio;qeo;f;qoihfi;qejhfkjqwehj
then you are including source maps in your compiled Js.
Check your browserify config to make sure that you are not compiling with source maps.
来源：https://stackoverflow.com/questions/34894876/reduce-size-of-large-react-based-single-page-applications-browserify-bundle-fi