减小基于大量React的单页应用程序的Browserify捆绑文件的大小 [英] Reduce Size of Large, React based Single Page Application's Browserify Bundle File

问题描述

我正在使用gulp和Browserify构建reactjs应用程序。我在我的应用程序中使用了material-ui组件。我的应用程序中有8个页面使用不同的组件。

由Browserify创建的build.js大小为4mb。我想减小它的大小。我搜索了一下关于懒加载设计模式的知识。但我很困惑应该如何使用它来缩小应用程序的尺寸？

我在我的应用程序中也使用react路由器，因此定义了8个路由。我有一个想法，我们可以延迟加载每个路由所需的文件，但是如何做到这一点呢？

PS：我会喜欢分享一些代码，但我不明白这样的问题需要哪种代码。

解决方案

问题很可能是您的JavaScript包含源地图。源图可以轻松地将代码的大小增加一个数量级。试着看看你编译的JS文件，如果你看到大的随机字符串，看起来像这样：

dlfheihfgrewifjwe; iofgrewfwejroifnekw.nfoeiquf0eqf; oiwehjfkl; qwejfio; qeo; f ; qoihfi; qejhfkjqwehj

然后你在编译的Js中包含源地图。

检查您的browserify配置，确保您没有编译源地图。

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.

解决方案

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.

这篇关于减小基于大量React的单页应用程序的Browserify捆绑文件的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！