I have been using Webpack with my WordPress development now fo a few years and implemented it using Laravel Mix. You can read more about that here. But more recently I have started using BrowserSync, mostly because I was working on a front end heavy site and was doing a lot more incremental changes to the SCSS.
But off the start, I noticed that the reload speeds were terrible. Far slower than manually refreshing the browser.
Previously I would have used a
.dev domain name, but Google was nice enough to force HTTPS on those gTLD’s so I wad forced like many to pick a new local gTLD or generic top-level domain. Some common choices were
.test but I went with
.local never really thinking much of the implications.
When looking into why my page reloaded so slowly ( even without using Browsersync it was very slow ) I noticed that I was using IP6, which I think was a fix for previous versions of macOS and local domains. macOS for whatever reason has some very poor DNS resolution for a
.local, oddly enough any alternative choice was fast like
Anyways, After a quick sanity check, I ran the following curl command
time curl -I http://site.local/ > /dev/null Which resulted in 6 seconds.
127.0.0.1 as well, and before the IP6 entry the time was drastically reduced to 0.7 seconds!
The best thing about this fix is that there is no need to adjust your webpack config 🙂