React-starter-kit: What is making the auto-reloading (or even server restarting) in development mode so slow?

[pfftdammitchris]

Sometimes when I just need to work on the user-interface for a little portion of the website which doesn't require the other stuff like jest, I need the auto-reloading to be quick like the speed of the create-react-app boilerplate because I'm constantly refreshing when changing values of brightness's, background color, etc but I find myself using majority of my time waiting for a reload rather than working on the actual UI.

My solution was to switch to create-react-app and re-install the needed dependencies, re-create the folder structures to mock up a copy of the layout in order to test in that. But this becomes a hassle when I would have to come back a week later to test another piece of updated layout (But at that time, my layout would have changed a lot, so there is more time out of my hands to think of how to re-structure to mock up the new layout)

What are the best optimizations I can do to improve the auto reloading to be a lot faster, without breaking the UI?

[tim-soft]

Browsersync is a sizable bottleneck imo, you can try to remove it. Are you printing a lot of data to the console?

[frenzzy]

If your change affects a lot of files which webpack must to recompile, add more HMR accepts to code parts you are working on.

[buildbreakdo]

@pfftdammitchris Yes, some of the features enabled by default are for when you're in QA mode or have a QA department. Believe these should be disabled by default and opt-in or toggled via node ENV variables. See the full list of options that are on by default here https://www.browsersync.io/docs/options. Rough _non-scientific_ testing, appears to cut build time in half.

Original:
https://github.com/kriasoft/react-starter-kit/blob/master/tools/start.js#L236

  // Launch the development server with Browsersync and HMR
  await new Promise((resolve, reject) =>
    browserSync.create().init(
      {
        // https://www.browsersync.io/docs/options
        server: 'src/server.js',
        middleware: [server],
        open: !process.argv.includes('--silent'),
        ...(isDebug ? {} : { notify: false, ui: false }),
      },
      (error, bs) => (error ? reject(error) : resolve(bs)),
    ),
  );

Mine (using an old version, merging changes into current code -- should work):

  // Launch the development server with Browsersync and HMR
  await new Promise((resolve, reject) =>
    browserSync.create().init(
      {
        // https://www.browsersync.io/docs/options
        server: 'src/server.js',
        middleware: [server],
        open: !process.argv.includes('--silent'),
        ...(isDebug ? {
          online: process.env.ONLINE || false,
          ghostmode: process.env.GHOSTMODE || false,
          notify: false,
          scrollProportionally: false,
          logFileChanges: false,
          logSnippet: false,
          minify: false,
          timestamps: false,
        } : { notify: false, ui: false }),
      },
      (error, bs) => (error ? reject(error) : resolve(bs)),
    ),
  );

Edit: Disabled a few more things that are on by default. Why minify dev code that seems expensive? Why log file changes, who/what is looking at these logs? Do I need a visual notification to be sent to the browser? Nope. Scroll proportionally is on by default, why if ghost mode is disabled? Find that confusing.

This could probably be a pull request.