Yet another slow browsersync issue

sage
,
1

Hi everyone,

I know there are a few threads out there already talking about this, but I feel like I’ve tried everything and I’m not getting anywhere. It’s driving me nuts. Since google acquired .dev everything has been going pear shaped. Browsersync is running so slowly it’s almost impossible to use. In fact, it’s quicker just to view my site as normal and refresh the page after running yarn build.

I’m on Mac OS X 10.15.3. My development browser is Safari 13

My local virtual host is set up as http://keelmanslodge.local which loads lightning fast when loaded up in safari.

Here is my config.json:

{
 "entry": {
 "main": [
  "./scripts/main.js",
  "./styles/main.scss"
 ],
 "customizer": [
  "./scripts/customizer.js"
 ],
 "login": [
  "./styles/login.scss"
 ],
 "editor": [
  "./styles/editor.scss"
 ]
},
"publicPath": "/wp-content/themes/keelmanslodge",
"devUrl": "http://keelmanslodge.local",
"proxyUrl": "http://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"watch": [
"app/**/*.php",
"config/**/*.php",
"resources/views/**/*.php"
]
}

I’ve tried using a old other than .local but I can never get it to work again (on this particular site). When changing pages within the wordpress site is when performance is worse, I’m often waiting in excess of 15 seconds for a page to start loading. Then it loads with no css, and painfully start to inject it slowly over the course of the next minute or so. Then it loads all of the changes I’ve made to my sass files during this “yarn start” session. This takes another 15-30 seconds while I watch everything move around and back again. The sass build time is usually around 4000ms or so everytime I make a change.

Can someone help with all of this, it’s nightmare at the moment!

2

Now it’s started reloading the whole page every time I save a sass file. It’s never done this before but I haven’t changed a thing with virtual hosts, my config or apache or anything. It’s just randomly started doing it…

Any help would be really appreciated. web packs behaviour has started getting bizarre and unpredictable lately, but I have no idea why…

3

Hi @ralphonz

Here’s a quickfix (3 lines of code to change) that adds an option to disable browserSync in Sage 9:

You can then disable browserSync in your config.json like so:

  "enabled": {
    "browserSync": false
  }

Once disabled, you can run yarn start to run webpack in a basic watch + rebuild mode. You have to manually refresh your pages but, for me, it’s not too bad.

I hope it helps.

P.

4

Thanks for the response pboi20, but this hasn’t really helped. It’s still taking an age to load a page when it rebuilds…

5

Hi @ralphonz

I believe its most probably 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.

A couple of solutions you can try,

  1. change .local to .dev and that wont trigger Bonjour lookups on macOS.

  2. You can alternatively add additional ipv6 entry i.e.

::1 keelmanslodge.local
127.0.0.1   keelmanslodge.local
6

Thanks for the recommendation ali, already done that. As I said it loads very quickly when bypassing webpack and just loading the .local domain straight in the browser.

I actually have:

::1             keelmanslodge.local
fe80::1%lo0     keelmanslodge.local
127.0.0.1       keelamnslodge.local

I also have this in vhost config:

<VirtualHost 0.0.0.0:80>
    DocumentRoot "/Users/ralphonz/Sites/Projects/Keelmans_Lodge/2019.Website/5.Site/public_html"
    ServerName keelmanslodge.local
    ServerAlias www.keelmanslodge.local
    <Directory /Users/ralphonz/Sites/Projects/Keelmans_Lodge/2019.Website/5.Site/public_html>
        Options Indexes MultiViews FollowSymLinks
        AllowOverride All
        Require all granted
        Header set Access-Control-Allow-Origin "*"
        Header always set Access-Control-Max-Age "1000"
        Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
        Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    </Directory>
</VirtualHost>

Trying using <VirtualHost 0.0.0.0:80> rather than <VirtualHost *:80>

To be honest that didn’t make a difference but I left it there anyway.

The problem with using .dev, or most other tld’s is the SSL requirement. I tried to set up a self-signed certificate but it keeps redirecting me to the standard “It Works!” page rather than the ones in my Sites folder. Can’t find a decent guide on how to get https working on localhost.

7

I don’t know if will help, but I avoid to use .local on MacOS because it’s kinda reserved for bonjour on OS, an made me some problems in the past.

8

And we can’t use .dev. It’s like, what the hell are we supposed to use!?

9

We’ve been recommending .test

3 Likes
10

@ralphonz
I am using .dev, successfully. I’ve used this tutorial to fix the dnsmasq issues I had on Mac Catalina: https://www.stevenrombauts.be/2019/06/restart-dnsmasq-without-sudo/

And I used these scripts to make sure my chrome browser accepts the certificates, and accepts me to use the .dev domain:

If anyone has any further questions, let me know.