search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.18k stars 756 forks source link

Very slow page (re-)load/injection on localhost:3000 TTFB of around 5s #1456

Closed flurinduerst closed 6 years ago

flurinduerst commented 6 years ago

Issue details

When accessing localhost:3000 it takes around 5s to load the page. This means that every time I save changes to (for example) my .scss files, it takes 5s until I see the changes in the browser. Watching the network tab, I can see that there's a TTFB of around 5s. When accessing my local domain wpdev.local the page takes the assumed 0.3s to load. The problem only occurs when accessing localhost:3000

Network Tab Screenshot: https://imgur.com/a/7LPDS

Steps to reproduce/test case

Setting up a local environment using scotchbox (vagrant/virtualbox) with the WPSeed WordPress starter theme.

Please specify which version of Browsersync, node and npm you're running

Affected platforms

Browsersync use-case

gulp-output at CLI

Starting 'clean'...
Starting 'css'...
Starting 'javascript'...
Starting 'images'...
Finished 'clean' after 52 ms
Finished 'css' after 1.29 s
Finished 'javascript' after 1.28 s
gulp-imagemin: Minified 2 images (saved 24.1 kB - 1.3%)
Finished 'images' after 2.38 s
Starting 'default'...
Finished 'default' after 75 μs
Using gulpfile ~/Code/webdev/public/wp-content/themes/lbb/gulpfile.js
Starting 'browsersync'...
Finished 'browsersync' after 15 ms
Starting 'watch'...
Finished 'watch' after 23 ms
[Browsersync] Proxying: http://webdev.local
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.33.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.33.10:3001
 --------------------------------------
Starting 'css'...
[Browsersync] 1 file changed (style.min.css)
Finished 'css' after 509 ms
Starting 'css'...
[Browsersync] 1 file changed (style.min.css)
Finished 'css' after 224 ms

gulpfile.js

/*
 * GULP CONFIG
 *
 * Desciption:  Clean gulpfile for web development workflow with browsersync, compiling/optimization of sass, javascript and images from assets to dist
 * Usage:       gulp (to run the whole process), gulp watch (to watch for changes and compile if anything was modified)
 *
 * Author:      Flurin Dürst (https://flurinduerst.ch)
 *
 * Version:     1.3.1
 *
*/

/* SETTINGS
/===================================================== */
var browsersync_proxy = "webdev.local";

/* DEPENDENCIES
/===================================================== */
// general
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require("gulp-rename");
// css
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
// js
var uglify = require('gulp-uglify');
// images
var imagemin = require('gulp-imagemin');
// error handling with notify & plumber
var notify = require("gulp-notify");
var plumber = require('gulp-plumber');
// watch
var watch = require('gulp-watch');
// delete
// var del = require('del');

/* TASKS
/===================================================== */

/* BROWSERSYNC
/------------------------*/
// initialize Browser Sync
gulp.task('browsersync', function() {
  browserSync.init({
    proxy: browsersync_proxy,
    notify: false,
    open: false,
    online: true,
    host: "192.168.33.10",
    snippetOptions: {
      whitelist: ['/wp-admin/admin-ajax.php'],
      blacklist: ['/wp-admin/**']
    }
  });
});

/* CSS
/------------------------*/
// from:    assets/styles/main.css
// actions: compile, minify, prefix, rename
// to:      dist/style.min.css
gulp.task('css', function() {
  gulp.src('assets/styles/main.scss')
  .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")}))
  .pipe(sass())
  .pipe(autoprefixer('last 2 version', { cascade: false }))
  .pipe(cleanCSS())
  .pipe(rename('dist/style.min.css'))
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream());
});

/* JAVASCRIPT
/------------------------*/
// from:    assets/scripts/
// actions: concatinate, minify, rename
// to:      dist/script.min.css
gulp.task('javascript', function() {
  gulp.src('assets/scripts/*.js')
  .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")}))
  .pipe(concat('script.min.js'))
  .pipe(uglify())
  .pipe(rename('dist/script.min.js'))
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream());
});

/* IMAGES
/------------------------*/
// from:    assets/images/
// actions: minify
// to:      dist/images
gulp.task('images',  function() {
  gulp.src('assets/images/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.stream());
});

/* CLEAN
/------------------------*/
// empty dist folder
gulp.task('clean', require('del').bind(null, ['dist/*']));

/* WATCH
/------------------------*/
// watch for modifications in
// styles, scripts, images, php files, html files
gulp.task('watch',  ['browsersync'], function() {
  gulp.watch('assets/styles/*.scss', ['css']);
  gulp.watch('assets/scripts/*.js', ['javascript']);
  gulp.watch('assets/images/*.*', ['images']);
  gulp.watch('*.php', browserSync.reload);
  gulp.watch('*.html', browserSync.reload);
});

/* DEFAULT
/------------------------*/
// default gulp tasks executed with `gulp`
gulp.task('default', ['clean', 'css', 'javascript', 'images']);

package.json

{
  "name": "fd.gulp",
  "description": "modules for webdev workflow",
  "author": "flurinduerst",
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "del": "^3.0.0",
    "gulp": "^3.8.6",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^3.4.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^4.3.11"
  }
}

hostsfile

## SYSTEM DEFAULT
######################################
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1     localhost
fe80::1%lo0     localhost

# VAGRANT HOSTSUPDATER #
########################
192.168.33.10  webdev.local  # VAGRANT: 607d2454f453f628071f742fbf1a0782 $
OddEssay commented 6 years ago

I'm seeing exactly the same issue - I can work around it for css and js by skipping the proxy with the serverStatic option:

gulp.task('browser-sync', ['sass'], function() {
      browserSync.init({
       proxy: "http://myserver.local",                                                                       
       serveStatic: [{
         route: ['/_production'],
         dir: '_production'
         }],
      }); 
  });

But when I change page, there's a consistent 5 second latency on each request. Tested on two different machines.

flurinduerst commented 6 years ago

Found out it only affects the .local domain. Changing it (to .vm in my case, others work as well) fixed it.

marcelo2605 commented 6 years ago

Replacing .local by .vm solved my problem too.

axeloz commented 6 years ago

Awesome! That did the trick although I'm not sure I understand why !!!

zArubaru commented 5 years ago

*.local seems to be shared with Bonjour on Macs, which leads to the experienced slowness (on OSX at least).

AshantiCode commented 5 years ago

Yes, also worked for me. I was working an a WordPress Theme. On Local FlyWheel I had to change the Site Domain from Mysite.local to Mysite.vm. And also had to change in my settings.js in my theme folder to this : exports.urlToPreview = 'http://Mysite.vm/'; Thanks a lot, reloading from 6-7 sec into very fast!