20

We're using create-react-app (with react-app-rewired) on a very large monolith. We've done some improvements to the build time (got it down to approx 20s), but after the build is complete (following a yarn start) the application takes a good 2 minutes to actually load on the browser.

In app.jsx I've tried removing all the root code and just rendered a typical "Hello World" p tag and it doesn't take nearly as long. I've also ran a basic web server infront of the build folder using serve which suggests it might webpack-dev-server that is having issues with the size of the application (Or could it be saying it's built before it actually is?).

In the chrome dev tools network tab the assets that are blocking the page from loading are the files from the static/js folder.

Here is a gist of the result from webpack-bundle-analyzer

Does anyone have any ideas where this issue could be originating and how to improve post-build load time?

WillKre
  • 6,280
  • 6
  • 32
  • 62
  • [Did you use webpack stats option? What does it show?](https://webpack.js.org/configuration/stats/) – Józef Podlecki Jan 20 '21 at 22:43
  • 2
    How large is are the compiled files? You can try running `webpack --profile --json > webpack-stats.json`. There are web sites such as https://chrisbateman.github.io/webpack-visualizer/ and https://webpack.github.io/analyse/ where you can upload that json file to get a visual graph of dependencies. – Dmitry S. Jan 20 '21 at 22:46
  • 1
    The build time depends on how long webpack bundles your source files. And this also depends on the loaders and plugins you use. Have a look at [webpack howtos optimize build time](https://webpack.js.org/guides/build-performance/). As for assets blocking from `static/js` in your network tab - If the file is too large to load - try to do code splitting – choz Jan 20 '21 at 23:12
  • Thanks for the responses - The build is optimised (building in 5 seconds approx). It's AFTER the build is complete and the localhost page opens that the app/page hangs for a while (shows a white page while something is happening in the background). In the network tab I can see index.css, main.js and remoteEntry.js stuck in pending for a while before the page loads. – WillKre Jan 22 '21 at 16:33
  • 2
    Please provide sizes, number of files, etc. – Janos Vinceller Jan 23 '21 at 09:06
  • 2
    Please include information about bundle size and stats detail from webpack-bundle-analyzer or source-map-explorer – Hamid Jan 24 '21 at 23:55
  • @JózefPodlecki @JanosVinceller @HamidOsouli Here is the result from `webpack-bundle-analyzer`: https://gist.github.com/dexc/49ac1ba47759798f52f1be1ce631ab9c . Let me know if anything else can help, thanks – WillKre Jan 25 '21 at 19:03
  • @Apswak May you send me more info about webpack config or installed plugin, please? – Masih Jahangiri Jan 25 '21 at 21:45
  • @Apswak will you please write the name of plugin you use? – Raksha Saini Jan 27 '21 at 18:33
  • Are you using a Docker container on Mac or another type of virtual machine? The filesystem of MacOS has huge performance issues when syncing webpack/docker files. We therefore discontinued using docker local development. – Gegenwind Sep 04 '21 at 09:32
  • Have you tried using extractCssPlugin and UglifyJsPlugin for webpack? https://stackoverflow.com/questions/48478969/bundle-js-slow-loading – Hamid Dec 16 '21 at 07:42

2 Answers2

1

Look into code splitting...

https://webpack.js.org/guides/code-splitting/

It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

svey
  • 115
  • 1
  • 7
0

I'm seeing a lot of node_modules in your build. Are all of them neccessary? The more of them you have, the longer it will take.

Source

Basil Nagle
  • 71
  • 1
  • 1
  • 8