BrowserSync extremely slow

Question

I would love to use BrowserSync for development. However, page loading (not only reloading after changes) is extremely slow.

I use the proxy mode. Browsing the page without BrowserSync is fast as it should be.

One reason may be the following error when I install BrowserSync:

> [email protected] install /usr/local/lib/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node
SOLINK_MODULE(target) Release/bufferutil.node: Finished
CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node
SOLINK_MODULE(target) Release/validation.node: Finished

I installed node from scratch (using brew and the package installer), but couldn't get rid of the error.

Furthermore, it doesn't make a difference if BrowserSync is run using Gulp or over the command line.

Any idea?

Answer 1

The solution is quite simple - but illogical imho. I had my local instance running under http://project.local. Changing it to http://project.dev solved the issue. I'm running OS X.

Answer 2

What you experience is most likely the result of Bonjour IPv6 lookups being issued for DNS lookups on .local domains. These IPv6 lookups create a timeout delay until the original IPv4 DNS lookup is issued.

The solution of @RicoLeuthold works, because .dev domains do not trigger Bonjour lookups on macOS. But it can be terrible to change all your vHosts if you already have many of them running on .local domains with projects configured to use these .local domains too.

ALTERNATIVE SOLUTION

An alternative is to add an additional IPv6 localhost entry in your hosts file (on Linux: /etc/hosts, on macOS usually: /private/etc/hosts) for each IPv4 .local entry.

Change this hosts content...

127.0.0.1   phpmyadmin.local
127.0.0.1   project1.local
127.0.0.1   project2.local

...to that hosts content...

::1 phpmyadmin.local
127.0.0.1   phpmyadmin.local
::1 project1.local
127.0.0.1   project1.local
::1 project2.local
127.0.0.1   project2.local

  
TIP: USE A REGEXP EDITOR

If you are using an editor like Atom or Sublime Text capable of regexp search/replace, here is a pattern to update your hosts file:

Search:
(127.0.0.1)(.*)$
Replace:
::1$2\n$1$2

This pattern will also add IPv6 entries to the general IPv4 localhost entry at the top of the hosts file. After doing the search/replace you should check the top of your file for a duplicate entry of...

::1  localhost

... and remove one of the duplicates.