减少基于 React 的大型单页应用程序的 Browserify Bundle 文件的大小答案

【问题标题】：Reduce Size of Large, React based Single Page Application's Browserify Bundle File减少基于 React 的大型单页应用程序的 Browserify Bundle 文件的大小
【发布时间】：2016-01-20 08:23:21
【问题描述】：

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

Browserify 创建的 build.js 大小为 4mb。我想减小它的大小。我已经搜索并了解了一些关于延迟加载设计模式的知识。但是我很困惑应该如何使用它来缩小我的应用程序的大小？

我还在我的应用程序中使用反应路由器，因此定义了 8 条路由。我有一个想法，我们可以延迟加载每条路线所需的文件，但是如何在反应中完成呢？

P.S : 我很想分享一些代码，但我不明白这样的问题需要什么样的代码。

【问题讨论】：

第一步：minify与Uglifyjs的代码，然后使用collapser之类的东西来减少重复的路径字符串。

标签： reactjs gulp browserify

【解决方案1】：

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

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

那么您将在编译的 Js 中包含源映射。

检查您的 browserify 配置以确保您没有使用源映射进行编译。

【讨论】：