更改 *.js 文件后，页面重新加载非常缓慢（~30sec-2min）[express+gulp+gulp-nodemon+browser-sync]

Posted 2023-03-08

【中文标题】更改 *.js 文件后，页面重新加载非常缓慢（~30sec-2min）[express+gulp+gulp-nodemon+browser-sync]

【英文标题】：After changes in *.js files, page reloads very slowly (~30sec-2min) [express+gulp+gulp-nodemon+browser-sync]

【发布时间】：2016-11-11 04:37:06

【问题描述】：

我正在使用 express.js 开发应用程序。我还使用 gulp 与 gulp-nodemon 和 browser-sync 来简化我的开发并提供 *.js 的自动更新、*.html 和 *.css 文件，而我正在处理项目。

但我有个问题！

当我对 *.css 或 *.html 文件进行更改时，browser-sync 会自动更新或自动重新加载在几毫秒内立即。但是当我对 *.js 文件进行更改时，自动重新加载需要几分钟。这是一个非常奇怪的行为！正如我在对 *.js 文件进行更改时观察到的那样本地主机：3000。但此请求等待大约 2 分钟，就在该页面重新加载并应用新更改之后。

为什么重新加载页面需要这么长时间？以及如何解决这个问题？感谢您的帮助！

这是我的 gulpfile.js

const gulp = require('gulp');
const nodemon = require('gulp-nodemon');
const browserSync = require('browser-sync').create();

gulp.task('default', ['browser-sync']);

gulp.task('browser-sync', ['nodemon'], function() 
    browserSync.init(null, 
        proxy: "http://localhost:3000",
        files: ["public/**/*.*", "views/**/*.*"],
        port: 7000
    );
);

gulp.task('nodemon', function(cb)
    var started = false;
    return nodemon(
        script: 'bin/www'
    ).on('start', function() 
        // to avoid nodemon being started multiple times
        if (!started) 
            cb();
            started = true;
        
    );
);

这是开发工具上网络部分的快照。 在这里您可以看到 *.js 文件更改后重新加载页面需要多长时间 image

【参考方案1】：

我遇到了同样的问题。因此，我尝试像这样更改我的 gulpfile：

gulp.task('browser-sync', ['nodemon'], function() 

    browserSync.init(null, 
        proxy: "http://localhost:8080",
        //files: ["public/**/*.css,html,js"], //Commented
        browser: "google chrome",
        port: 8080
    );

    gulp.watch("public/**/*.css,html,js").on('change', browserSync.reload);
);

我希望它对你有用。请试一试。