減小基於大型，基於React的單頁應用程序的Browserify捆綁文件的大小

Question

我正在使用gulp和Browserify構建reactjs應用程序。我在我的應用程序中使用了material-ui組件。我的應用程序中有8個頁面使用不同的組件。

由Browserify創建的build.js大小爲4mb。我想減小它的大小。我搜索了一下關於懶加載設計模式的知識。但我很困惑應該如何使用它來縮小應用程序的尺寸？

我也在我的應用程序中使用react路由器，所以有8個路由定義。我有一個想法，我們可以延遲加載每個路由所需的文件，但是如何做到這一點呢？

P.S：我會喜歡分享一些代碼，但我不明白這樣的問題需要什麼樣的代碼。

Answer 1

問題很可能是您的JavaScript包含源地圖。源圖可以輕鬆地將代碼的大小增加一個數量級。嘗試採取看看你編譯的JS文件，如果你看到一個看起來像這樣大的隨機字符串：

dlfheihfgrewifjwe; iofgrewfwejroifnekw.nfoeiquf0eqf; oiwehjfkl; qwejfio; QEO; F; qoihfi; qejhfkjqwehj

那麼你包括編譯後的Js中的源地圖。

檢查您的browserify配置以確保您沒有編譯源地圖。